feat: Display picker suggestion list in advance #340 (#341)

h2oai · Dec 3, 2020 · 80def55 · 80def55
1 parent 1cc7698
commit 80def55
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/py/examples/picker.py b/py/examples/picker.py
@@ -20,7 +20,7 @@ async def serve(q: Q):
                 ui.choice(name='cheese', label='Cheese'),
                 ui.choice(name='beans', label='Beans'),
                 ui.choice(name='toast', label='Toast'),
-            ]),
+            ], values='eggs'),
             ui.button(name='show_inputs', label='Submit', primary=True),
         ])
     await q.page.save()
diff --git a/ui/src/picker.test.tsx b/ui/src/picker.test.tsx
@@ -1,8 +1,7 @@
+import { fireEvent, render } from '@testing-library/react'
 import React from 'react'
-import { render, fireEvent } from '@testing-library/react'
-import { XPicker, Picker } from './picker'
+import { Picker, XPicker } from './picker'
 import * as T from './qd'
-import { initializeIcons } from '@fluentui/react'
 
 const name = 'picker'
 let pickerProps: Picker
@@ -14,7 +13,6 @@ const typeToInput = (input: HTMLInputElement, value: string) => {
 }
 
 describe('Picker.tsx', () => {
-  beforeAll(() => initializeIcons())
   beforeEach(() => {
     pickerProps = {
       name,
@@ -157,4 +155,10 @@ describe('Picker.tsx', () => {
     expect(T.qd.args[name]).toMatchObject([name, 'something else'])
   })
 
+  it('should open suggestion list on click', () => {
+    const { getByTestId, queryByText } = render(<XPicker model={pickerProps} />)
+    expect(queryByText('Suggestions')).not.toBeInTheDocument()
+    fireEvent.click(getByTestId(name))
+    expect(queryByText('Suggestions')).toBeInTheDocument()
+  })
 })
diff --git a/ui/src/picker.tsx b/ui/src/picker.tsx
@@ -38,22 +38,19 @@ const pickerSuggestionsProps: Fluent.IBasePickerSuggestionsProps = {
 export const XPicker = bond(({ model: m }: { model: Picker }) => {
   const
     tags: Fluent.ITag[] = m.choices.map(({ name, label }) => ({ key: name, name: label || name })),
-    selectedTagsB = box<Fluent.ITag[]>(
-      m.choices
-        .filter(({ name }) => m.values?.includes(name))
-        .map(({ name, label }) => ({ key: name, name: label || name }))
-    ),
-    filterSuggestedTags = (filterText: string, selectedTags?: Fluent.ITag[]) => {
+    selectedTagsB = box<Fluent.ITag[]>(tags.filter(({ key }) => m.values?.includes(key as S))),
+    filterSuggestedTags = (filterText: S, selectedTags?: Fluent.ITag[]) => {
       if (!filterText) return []
       const isAlreadySelected = (t: Fluent.ITag) => selectedTags && selectedTags.includes(t)
-      const isStringMatch = (name: string) => name.toLowerCase().includes(filterText.toLowerCase())
+      const isStringMatch = (name: S) => name.toLowerCase().includes(filterText.toLowerCase())
       return tags.filter(t => isStringMatch(t.name) && !isAlreadySelected(t))
     },
     onChange = (items?: Fluent.ITag[]) => {
       selectedTagsB(items || [])
       qd.args[m.name] = items ? items.map(({ key }) => key) : null
       if (m.trigger) qd.sync()
     },
+    onEmptyResolveSuggestions = () => tags,
     init = () => qd.args[m.name] = m.values || null,
     render = () => (
       <div style={displayMixin(m.visible)}>
@@ -67,6 +64,7 @@ export const XPicker = bond(({ model: m }: { model: Picker }) => {
           itemLimit={m.max_choices}
           selectedItems={selectedTagsB()}
           disabled={m.disabled}
+          onEmptyResolveSuggestions={onEmptyResolveSuggestions}
         />
       </div>
     )