Add enter handler for textbox

Fixes: #372
h2oai · Dec 18, 2020 · 5c08d95 · 5c08d95
1 parent 5104ef5
commit 5c08d95
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 1 deletion.
diff --git a/py/examples/textbox.py b/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),
  ])

diff --git a/ui/src/textbox.test.tsx b/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()
+ })
+
+})
diff --git a/ui/src/textbox.tsx b/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}
  />
  )