From e7a82acf874f46b56e8427cdb389ff1f18f12927 Mon Sep 17 00:00:00 2001 From: Mikkel Laursen Date: Wed, 8 Jul 2020 20:07:43 -0600 Subject: [PATCH] feat: Render non-searchable items in AutoComplete Since it can sometimes be helpful to render additional items that are not searchable and mostly for presentation, the AutoComplete was updated to have `beforeResultsChildren` and `afterResultsChildren` props. The `afterResultsChildren` prop is good to use for fetching additional results for paginated auto completion. --- packages/autocomplete/src/AutoComplete.tsx | 6 + .../src/__tests__/AutoComplete.tsx | 42 ++++ .../__snapshots__/AutoComplete.tsx.snap | 213 ++++++++++++++++++ packages/autocomplete/src/types.ts | 14 ++ 4 files changed, 275 insertions(+) diff --git a/packages/autocomplete/src/AutoComplete.tsx b/packages/autocomplete/src/AutoComplete.tsx index 81412c4cbf..618d91cb04 100644 --- a/packages/autocomplete/src/AutoComplete.tsx +++ b/packages/autocomplete/src/AutoComplete.tsx @@ -80,6 +80,8 @@ const AutoComplete = forwardRef( omitKeys = EMPTY_LIST, value: propValue, defaultValue, + beforeResultsChildren, + afterResultsChildren, ...props }, forwardedRef @@ -185,6 +187,7 @@ const AutoComplete = forwardRef( style={fixedStyle} className={cn(listbox({ temporary: true }), listboxClassName)} > + {beforeResultsChildren} {filteredData.map((datum, i) => { const resultId = getResultId(suggestionsId, i); let optionProps: ListboxOptionProps | undefined; @@ -215,6 +218,7 @@ const AutoComplete = forwardRef( ); })} + {afterResultsChildren} @@ -307,6 +311,8 @@ if (process.env.NODE_ENV !== "production") { omitKeys: PropTypes.arrayOf(PropTypes.string), value: PropTypes.string, defaultValue: PropTypes.string, + beforeResultsChildren: PropTypes.node, + afterResultsChildren: PropTypes.node, }; } catch (e) {} } diff --git a/packages/autocomplete/src/__tests__/AutoComplete.tsx b/packages/autocomplete/src/__tests__/AutoComplete.tsx index 566f8ec596..dc71266b18 100644 --- a/packages/autocomplete/src/__tests__/AutoComplete.tsx +++ b/packages/autocomplete/src/__tests__/AutoComplete.tsx @@ -195,4 +195,46 @@ describe("AutoComplete", () => { expect(getListbox).toThrow(); fireEvent.blur(input); }); + + it("should be able to render content before and after the matching data", () => { + const beforeResultsChildren =
Before Results
; + const afterResultsChildren =
After Results
; + const { getByText, getByRole } = render( + + ); + + const input = getById("autocomplete"); + const getListbox = () => getByRole("listbox"); + const getBeforeResults = () => getByText("Before Results"); + const getAfterResults = () => getByText("After Results"); + + expect(getBeforeResults).toThrow(); + expect(getAfterResults).toThrow(); + + fireEvent.focus(input); + expect(getBeforeResults).not.toThrow(); + expect(getAfterResults).not.toThrow(); + + const listbox = getListbox(); + expect(listbox.firstChild?.textContent).toBe("Before Results"); + expect(listbox.lastChild?.textContent).toBe("After Results"); + expect(listbox).toMatchSnapshot(); + + // filtered matches + fireEvent.change(input, { value: "Am" }); + expect(listbox.firstChild?.textContent).toBe("Before Results"); + expect(listbox.lastChild?.textContent).toBe("After Results"); + expect(listbox).toMatchSnapshot(); + + // no matches + fireEvent.change(input, { value: "Aml" }); + expect(listbox.firstChild?.textContent).toBe("Before Results"); + expect(listbox.lastChild?.textContent).toBe("After Results"); + expect(listbox).toMatchSnapshot(); + }); }); diff --git a/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap b/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap index b712ab1e94..17dea6cd3d 100644 --- a/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap +++ b/packages/autocomplete/src/__tests__/__snapshots__/AutoComplete.tsx.snap @@ -1,5 +1,218 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`AutoComplete should be able to render content before and after the matching data 1`] = ` +
    +
    + Before Results +
    +
  • + + Alabama + +
    • +
  • + + Alaska + +
    • +
  • + + American Samoa + +
    • +
  • + + Arizona + +
    • +
  • + + Arkansas + +
    • +
    + After Results +
    +
+`; + +exports[`AutoComplete should be able to render content before and after the matching data 2`] = ` +
    +
    + Before Results +
    +
  • + + Alabama + +
    • +
  • + + Alaska + +
    • +
  • + + American Samoa + +
    • +
  • + + Arizona + +
    • +
  • + + Arkansas + +
    • +
    + After Results +
    +
+`; + +exports[`AutoComplete should be able to render content before and after the matching data 3`] = ` +
    +
    + Before Results +
    +
  • + + Alabama + +
    • +
  • + + Alaska + +
    • +
  • + + American Samoa + +
    • +
  • + + Arizona + +
    • +
  • + + Arkansas + +
    • +
    + After Results +
    +
+`; + exports[`AutoComplete should handle a normal filter flow 1`] = `