This repository was archived by the owner on Jul 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 144
This repository was archived by the owner on Jul 12, 2024. It is now read-only.
Search component does not accept static options Array in autocomplete #6061
Copy link
Copy link
Closed
woocommerce/google-listings-and-ads
#643Labels
focus: componentsIssues for woocommerce componentsIssues for woocommerce componentsneeds: author feedbackThe issue/PR needs a response from any of the parties involved in the issue.The issue/PR needs a response from any of the parties involved in the issue.type: bugThe issue is a confirmed bug.The issue is a confirmed bug.
Description
Describe the bug
I'm not 100% sure whether it's a bug, the desired behavior, or just out-dated docs.
I'm trying to set up a Search
component (actually a FilterPicker
with Search
inside), with a custom type
.
The wc-component docs says that I need to provide an autocompleter
and links to Gutenberg's docs defining the interface
Which states that options
should be "Type: Array|Function
".
When I provide an Array, it throws with
index.js:112 Uncaught TypeError: autocompleter.options is not a function
at Search.fetchOptions (index.js:112)
at SelectControl.updateFilteredOptions (index.js:241)
at e (lodash.min.js?ver=4.17.19:86)
at c (lodash.min.js?ver=4.17.19:87)
at f (lodash.min.js?ver=4.17.19:87)
https://github.com/woocommerce/woocommerce-admin/blob/main/packages/components/src/search/index.js#L112
Obviously expect a function that returns a promise.
To Reproduce
Steps to reproduce the behavior:
- Create
<Search>
with custom type and Array in autocomplete options, like the one given in docs example:{ name: 'fruit', // The prefix that triggers this completer triggerPrefix: '~', // The option data options: [ { visual: '🍎', name: 'Apple', id: 1 }, { visual: '🍊', name: 'Orange', id: 2 }, { visual: '🍇', name: 'Grapes', id: 3 }, ], // Returns a label for an option like "🍊 Orange" getOptionLabel: option => ( <span> <span className="icon" >{ option.visual }</span>{ option.name } </span> ), // Declares that options should be matched by their name getOptionKeywords: option => [ option.name ], // Declares that the Grapes option is disabled isOptionDisabled: option => option.name === 'Grapes', // Declares completions should be inserted as abbreviations getOptionCompletion: option => ( <abbr title={ option.name }>{ option.visual }</abbr> ), }
Expected behavior
The component should be rendered.
Screenshots
Desktop (please complete the following information):
- OS: [e.g. iOS] Win10
- Browser [e.g. chrome, safari] Chrome, Firefox
findingsimple
Metadata
Metadata
Assignees
Labels
focus: componentsIssues for woocommerce componentsIssues for woocommerce componentsneeds: author feedbackThe issue/PR needs a response from any of the parties involved in the issue.The issue/PR needs a response from any of the parties involved in the issue.type: bugThe issue is a confirmed bug.The issue is a confirmed bug.