fix: Do not show already selected options in ui.picker #1985 (#2195)

h2oai · Nov 20, 2023 · de4af7e · de4af7e
1 parent 9897c98
commit de4af7e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/ui/src/picker.test.tsx b/ui/src/picker.test.tsx
@@ -148,7 +148,7 @@ describe('Picker.tsx', () => {
     expect(getAllByRole('option')).toHaveLength(1)
   })
 
-  it('Filters correctly - does not offer already selected', () => {
+  it('Filters correctly - does not offer already selected - with input provided', () => {
     const { getByRole, queryByRole } = render(<XPicker model={pickerProps} />)
     const input = (getByRole('combobox') as HTMLInputElement)
 
@@ -159,6 +159,24 @@ describe('Picker.tsx', () => {
     expect(queryByRole('option')?.querySelector('.ms-Suggestions-none')).toBeInTheDocument()
   })
 
+  it('Filters correctly - does not offer already selected - without input provided', () => {
+    const { getByRole, queryByRole, getAllByRole } = render(<XPicker model={pickerProps} />)
+    const input = (getByRole('combobox') as HTMLInputElement)
+
+    fireEvent.click(input)
+    expect(getAllByRole('option')).toHaveLength(2)
+    typeToInput(input, name)
+    fireEvent.click(getByRole('option'))
+
+    fireEvent.click(input)
+    expect(getAllByRole('option')).toHaveLength(1)
+    typeToInput(input, altName)
+    fireEvent.click(getByRole('option'))
+
+    fireEvent.click(input)
+    expect(queryByRole('option')?.querySelector('.ms-Suggestions-none')).toBeInTheDocument()
+  })
+
   it('Sets args - single selection', () => {
     const { getByRole } = render(<XPicker model={pickerProps} />)
 

diff --git a/ui/src/picker.tsx b/ui/src/picker.tsx
@@ -67,7 +67,7 @@ export const XPicker = ({ model: m }: { model: Picker }) => {
       wave.args[m.name] = items ? items.map(({ key }) => key) : null
       if (m.trigger) wave.push()
     },
-    onEmptyResolveSuggestions = () => tags
+    onEmptyResolveSuggestions = () => tags.filter(tag => !selectedTags.includes(tag))
 
   React.useEffect(() => {
     wave.args[m.name] = m.values || null