fix: Allow user to unselect user typed choice #1523 (#1533)

h2oai · Jul 11, 2022 · 989d2c8 · 989d2c8
1 parent 12a875e
commit 989d2c8
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/ui/src/combobox.test.tsx b/ui/src/combobox.test.tsx
@@ -46,7 +46,7 @@ describe('Combobox.tsx', () => {
   })
 
   it('Sets args - multiple selection', () => {
-    const { getByRole, getByText } = render(<XCombobox model={{ ...comboboxProps , values: [] }} />)
+    const { getByRole, getByText } = render(<XCombobox model={{ ...comboboxProps, values: [] }} />)
     fireEvent.click(getByRole('presentation', { hidden: true }))
     fireEvent.click(getByText('Choice1'))
     fireEvent.click(getByText('Choice2'))
@@ -86,4 +86,13 @@ describe('Combobox.tsx', () => {
 
     expect(pushMock).toHaveBeenCalled()
   })
+
+  it('Selects and unselects a user typed option', () => {
+    const { getByRole, getByText } = render(<XCombobox model={{ ...comboboxProps, values: [] }} />)
+    userEvent.type(getByRole('combobox'), 'Choice4{Enter}')
+    expect(wave.args[name]).toEqual(['Choice4'])
+    fireEvent.click(getByRole('presentation', { hidden: true }))
+    fireEvent.click(getByText('Choice4'))
+    expect(wave.args[name]).toEqual([])
+  })
 })
diff --git a/ui/src/combobox.tsx b/ui/src/combobox.tsx
@@ -75,9 +75,9 @@ export const
       },
       onChange = (_e: React.FormEvent<Fluent.IComboBox>, option?: Fluent.IComboBoxOption, _index?: U, value?: S) => {
         if (!option && value) {
-          const opt: Fluent.IComboBoxOption = { key: value, text: value, selected: true }
+          const opt: Fluent.IComboBoxOption = { key: value, text: value }
           setOptions((prevOptions = []) => [...prevOptions, opt])
-          selectOpt(opt)
+          selectOpt({...opt, selected: true})
         }
         if (option && isMultiValued) {
           selectOpt(option)