Add enter handler for textbox

Fixes: #372

Author: VijithaEkanayake

py/examples/textbox.py

@@ -22,6 +22,11 @@ async def serve(q: Q):
             ui.text(f'textbox_multiline={q.args.textbox_multiline}'),
             ui.button(name='show_form', label='Back', primary=True),
         ]
+    elif q.args.enter_key_handler:
+        q.page['example'].items = [
+            ui.text(f'textbox_enter_key_handler={q.args.enter_key_handler}'),
+            ui.button(name='show_form', label='Back', primary=True),
+        ]
     else:
         q.page['example'] = ui.form_card(box='1 1 4 10', items=[
             ui.textbox(name='textbox', label='Standard'),
@@ -36,6 +41,7 @@ async def serve(q: Q):
             ui.textbox(name='textbox_placeholder', label='With placeholder', placeholder='I need some input'),
             ui.textbox(name='textbox_disabled_placeholder', label='Disabled with placeholder', disabled=True,
                        placeholder='I am disabled'),
+            ui.textbox(name='enter_key_handler', label='Submits the textbox value on Enter key', icon='Search'),
             ui.textbox(name='textbox_multiline', label='Multiline textarea', multiline=True),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])

ui/src/textbox.test.tsx

@@ -101,4 +101,35 @@ describe('Textbox.tsx', () => {
 
     expect(syncMock).not.toBeCalled()
   })
-})
+
+  it('Calls sync on key up  - When the key is Enter key', () => {
+    const { getByTestId } = render(<XTextbox model={textboxProps} />)
+    const syncMock = jest.fn()
+
+    T.qd.sync = syncMock
+    fireEvent.keyUp(getByTestId(name), { key: 'Enter', target: { value: 'text' } })
+
+    expect(syncMock).toBeCalled()
+  })
+
+  it('Does not call sync on key up  - When the key is not Enter key', () => {
+    const { getByTestId } = render(<XTextbox model={textboxProps} />)
+    const syncMock = jest.fn()
+
+    T.qd.sync = syncMock
+    fireEvent.keyUp(getByTestId(name), { key: 'A', target: { value: 'text' } })
+
+    expect(syncMock).not.toBeCalled()
+  })
+
+  it('Does not call sync on key up  - When multiline is true', () => {
+    const { getByTestId } = render(<XTextbox model={{ ...textboxProps, multiline: true}} />)
+    const syncMock = jest.fn()
+
+    T.qd.sync = syncMock
+    fireEvent.keyUp(getByTestId(name), { key: 'Enter', target: { value: 'text' } })
+
+    expect(syncMock).not.toBeCalled()
+  })
+
+})

ui/src/textbox.tsx

@@ -75,6 +75,13 @@ export const
         qd.args[m.name] = v ?? (m.value || '')
         if (m.trigger) qd.sync()
       },
+      onKeyUp = ( event: React.KeyboardEvent<HTMLInputElement>, v?: string) => {
+        if ((event).key == "Enter" && event.target instanceof HTMLInputElement) {
+          v = v || (event.target as HTMLInputElement).value
+          qd.args[m.name] = v ?? (m.value || '')
+          qd.sync()
+        }
+      },
       render = () => m.mask
         ? (
           <Fluent.MaskedTextField
@@ -88,6 +95,7 @@ export const
             disabled={m.disabled}
             readOnly={m.readonly}
             onChange={m.trigger ? debounce(DEBOUNCE_TIMEOUT, onChange) : onChange}
+            onKeyUp={onKeyUp}
           />
         )
         : (
@@ -108,6 +116,7 @@ export const
             multiline={m.multiline}
             type={m.password ? 'password' : undefined}
             onChange={m.trigger ? debounce(DEBOUNCE_TIMEOUT, onChange) : onChange}
+            onKeyUp={onKeyUp}
           />
         )