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

@@ -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'))

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(

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