From 81ec1b8dc379c05bf0aa560e15c4fb183275c241 Mon Sep 17 00:00:00 2001
From: Caleb Roseland <caleb@calebroseland.com>
Date: Tue, 4 Apr 2023 14:29:49 -0500
Subject: [PATCH] Backport: MM-51842: fix value-change detection in number
 properties (#4694)

---
 .../number/__snapshots__/number.test.tsx.snap | 13 ++++
 webapp/src/properties/number/number.test.tsx  | 72 +++++++++++++++++++
 webapp/src/properties/number/number.tsx       |  2 +-
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 webapp/src/properties/number/__snapshots__/number.test.tsx.snap
 create mode 100644 webapp/src/properties/number/number.test.tsx

diff --git a/webapp/src/properties/number/__snapshots__/number.test.tsx.snap b/webapp/src/properties/number/__snapshots__/number.test.tsx.snap
new file mode 100644
index 00000000000..8e914cd2c6f
--- /dev/null
+++ b/webapp/src/properties/number/__snapshots__/number.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`properties/number should match snapshot for number with empty value 1`] = `
+<div>
+  <input
+    class="Editable octo-propertyvalue"
+    placeholder=""
+    style="width: 100%;"
+    title=""
+    value=""
+  />
+</div>
+`;
diff --git a/webapp/src/properties/number/number.test.tsx b/webapp/src/properties/number/number.test.tsx
new file mode 100644
index 00000000000..6bb9194b166
--- /dev/null
+++ b/webapp/src/properties/number/number.test.tsx
@@ -0,0 +1,72 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React, {ComponentProps} from 'react'
+import {render, screen} from '@testing-library/react'
+import {mocked} from 'jest-mock'
+
+import userEvent from '@testing-library/user-event'
+
+import {wrapIntl} from '../../testUtils'
+import {TestBlockFactory} from '../../test/testBlockFactory'
+import mutator from '../../mutator'
+
+import {Board, IPropertyTemplate} from '../..//blocks/board'
+import {Card} from '../../blocks/card'
+
+import NumberProperty from './property'
+import NumberEditor from './number'
+
+jest.mock('../../components/flashMessages')
+jest.mock('../../mutator')
+
+const mockedMutator = mocked(mutator)
+
+describe('properties/number', () => {
+    let board: Board
+    let card: Card
+    let propertyTemplate: IPropertyTemplate
+    let baseProps: ComponentProps<typeof NumberEditor>
+
+    beforeEach(() => {
+        board = TestBlockFactory.createBoard()
+        card = TestBlockFactory.createCard()
+        propertyTemplate = board.cardProperties[0]
+
+        baseProps = {
+            property: new NumberProperty(),
+            card,
+            board,
+            propertyTemplate,
+            propertyValue: '',
+            readOnly: false,
+            showEmptyPlaceholder: false,
+        }
+    })
+
+    it('should match snapshot for number with empty value', () => {
+        const {container} = render(
+            wrapIntl((
+                <NumberEditor
+                    {...baseProps}
+                />
+            )),
+        )
+        expect(container).toMatchSnapshot()
+    })
+
+    it('should fire change event when valid number value is entered', async () => {
+        render(
+            wrapIntl(
+                <NumberEditor
+                    {...baseProps}
+                />,
+            ),
+        )
+        const value = '42'
+        const input = screen.getByRole('textbox')
+        userEvent.type(input, `${value}{Enter}`)
+
+        expect(mockedMutator.changePropertyValue).toHaveBeenCalledWith(board.id, card, propertyTemplate.id, `${value}`)
+    })
+})
diff --git a/webapp/src/properties/number/number.tsx b/webapp/src/properties/number/number.tsx
index b22b43105a2..5f607f9eb34 100644
--- a/webapp/src/properties/number/number.tsx
+++ b/webapp/src/properties/number/number.tsx
@@ -10,7 +10,7 @@ const Number = (props: PropertyProps): JSX.Element => {
     return (
         <BaseTextEditor
             {...props}
-            validator={() => !isNaN(parseInt(props.propertyValue as string, 10))}
+            validator={() => props.propertyValue === '' || !isNaN(parseInt(props.propertyValue as string, 10))}
         />
     )
 }