From a129dbc1b88ff9d873aa88893c0184ddc9dba5b3 Mon Sep 17 00:00:00 2001
From: Scott Bishel <scott.bishel@mattermost.com>
Date: Wed, 27 Jul 2022 13:35:36 -0600
Subject: [PATCH] Store current input while user is changing. (#3256)

* add ref to retrieve current text setting

* change to handle without forwardRefs

* state not needed here

* cleanup

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
---
 webapp/src/widgets/menu/textInputOption.tsx | 10 +++++++---
 webapp/src/widgets/propertyMenu.test.tsx    | 21 +++++++++++++++++++++
 webapp/src/widgets/propertyMenu.tsx         |  9 +++++++--
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/webapp/src/widgets/menu/textInputOption.tsx b/webapp/src/widgets/menu/textInputOption.tsx
index cd5d0cf6e..0f96284f4 100644
--- a/webapp/src/widgets/menu/textInputOption.tsx
+++ b/webapp/src/widgets/menu/textInputOption.tsx
@@ -4,6 +4,7 @@ import React, {useState, useRef, useEffect} from 'react'
 
 type TextInputOptionProps = {
     initialValue: string,
+    onConfirmValue: (value: string) => void
     onValueChanged: (value: string) => void
 }
 
@@ -22,13 +23,16 @@ function TextInputOption(props: TextInputOptionProps): JSX.Element {
             type='text'
             className='PropertyMenu menu-textbox menu-option'
             onClick={(e) => e.stopPropagation()}
-            onChange={(e) => setValue(e.target.value)}
+            onChange={(e) => {
+                setValue(e.target.value)
+                props.onValueChanged(value)
+            }}
             value={value}
             title={value}
-            onBlur={() => props.onValueChanged(value)}
+            onBlur={() => props.onConfirmValue(value)}
             onKeyDown={(e) => {
                 if (e.key === 'Enter' || e.key === 'Escape') {
-                    props.onValueChanged(value)
+                    props.onConfirmValue(value)
                     e.stopPropagation()
                     if (e.key === 'Enter') {
                         e.target.dispatchEvent(new Event('menuItemClicked'))
diff --git a/webapp/src/widgets/propertyMenu.test.tsx b/webapp/src/widgets/propertyMenu.test.tsx
index 9ba812a07..fed6acb4e 100644
--- a/webapp/src/widgets/propertyMenu.test.tsx
+++ b/webapp/src/widgets/propertyMenu.test.tsx
@@ -83,6 +83,27 @@ describe('widgets/PropertyMenu', () => {
         setTimeout(() => expect(callback).toHaveBeenCalledWith('select', 'test-property'), 2000)
     })
 
+    test('handles name and type change event', () => {
+        const callback = jest.fn()
+        const component = wrapIntl(
+            <PropertyMenu
+                propertyId={'id'}
+                propertyName={'test-property'}
+                propertyType={'text'}
+                onTypeAndNameChanged={callback}
+                onDelete={callback}
+            />,
+        )
+        const {getByDisplayValue, getByText} = render(component)
+        const input = getByDisplayValue(/test-property/i)
+        fireEvent.change(input, {target: {value: 'changed name'}})
+
+        const menuOpen = getByText(/Type: Text/i)
+        fireEvent.click(menuOpen)
+        fireEvent.click(getByText('Select'))
+        setTimeout(() => expect(callback).toHaveBeenCalledWith('select', 'changed name'), 2000)
+    })
+
     test('should match snapshot', () => {
         const callback = jest.fn()
         const component = wrapIntl(
diff --git a/webapp/src/widgets/propertyMenu.tsx b/webapp/src/widgets/propertyMenu.tsx
index dca3adcc1..d2af19e63 100644
--- a/webapp/src/widgets/propertyMenu.tsx
+++ b/webapp/src/widgets/propertyMenu.tsx
@@ -91,6 +91,7 @@ export const PropertyTypes = (props: TypesProps): JSX.Element => {
 
 const PropertyMenu = (props: Props) => {
     const intl = useIntl()
+    let currentPropertyName = props.propertyName
 
     const deleteText = intl.formatMessage({
         id: 'PropertyMenu.Delete',
@@ -101,7 +102,11 @@ const PropertyMenu = (props: Props) => {
         <Menu>
             <Menu.TextInput
                 initialValue={props.propertyName}
-                onValueChanged={(n) => props.onTypeAndNameChanged(props.propertyType, n)}
+                onConfirmValue={(n) => {
+                    props.onTypeAndNameChanged(props.propertyType, n)
+                    currentPropertyName = n
+                }}
+                onValueChanged={(n) => currentPropertyName = n}
             />
             <Menu.SubMenu
                 id='type'
@@ -109,7 +114,7 @@ const PropertyMenu = (props: Props) => {
             >
                 <PropertyTypes
                     label={intl.formatMessage({id: 'PropertyMenu.changeType', defaultMessage: 'Change property type'})}
-                    onTypeSelected={(type: PropertyType) => props.onTypeAndNameChanged(type, props.propertyName)}
+                    onTypeSelected={(type: PropertyType) => props.onTypeAndNameChanged(type, currentPropertyName)}
                 />
             </Menu.SubMenu>
             <Menu.Text