Skip to content
This repository has been archived by the owner on Jun 7, 2022. It is now read-only.

Search component does not accept static options Array in autocomplete #6061

Closed
tomalec opened this issue Jan 13, 2021 · 1 comment · Fixed by #6884 · May be fixed by woocommerce/google-listings-and-ads#643
Closed

Search component does not accept static options Array in autocomplete #6061

tomalec opened this issue Jan 13, 2021 · 1 comment · Fixed by #6884 · May be fixed by woocommerce/google-listings-and-ads#643
Labels
focus: components Issues for woocommerce components needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. type: bug The issue is a confirmed bug.

Comments

@tomalec
Copy link
Member

tomalec commented Jan 13, 2021

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:

  1. 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
@tomalec tomalec added type: question The issue is a question about how code works. focus: components Issues for woocommerce components type: documentation This issue is a request for better documentation. needs: documentation The issue/PR requires documentation to be added. labels Jan 13, 2021
tomalec added a commit to woocommerce/google-listings-and-ads that referenced this issue Jan 13, 2021
Move filter configuration to a separate file.
Subfilter is still not functional due to issues with Search autocomplete config:
 - woocommerce/woocommerce-admin#6061
 - woocommerce/woocommerce-admin#6062
@adrianduffell adrianduffell added type: bug The issue is a confirmed bug. and removed needs: documentation The issue/PR requires documentation to be added. type: documentation This issue is a request for better documentation. type: question The issue is a question about how code works. labels Feb 8, 2021
@adrianduffell
Copy link
Contributor

@tomalec this looks like a bug. I think it would be better to support all of the valid type of options possible for the autocompleter.

Are you interested in creating a PR for this?

@adrianduffell adrianduffell added the needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. label Feb 9, 2021
tomalec added a commit that referenced this issue Apr 26, 2021
tomalec added a commit that referenced this issue May 3, 2021
Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>

Make `Search` component accept `autocompleter.options` that meet the requirements stated in [the docs](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/autocomplete#options): 
> May be an array, a function that returns an array, or a function that returns a promise for an array.


Fixes #6061.
tomalec added a commit to woocommerce/google-listings-and-ads that referenced this issue May 20, 2021
ObliviousHarmony pushed a commit to woocommerce/woocommerce that referenced this issue Mar 18, 2022
…mmerce-admin#6884)

Co-authored-by: Jeff Stieler <jeff.m.stieler@gmail.com>

Make `Search` component accept `autocompleter.options` that meet the requirements stated in [the docs](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/autocomplete#options): 
> May be an array, a function that returns an array, or a function that returns a promise for an array.


Fixes woocommerce/woocommerce-admin#6061.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: components Issues for woocommerce components needs: author feedback The issue/PR needs a response from any of the parties involved in the issue. type: bug The issue is a confirmed bug.
Projects
None yet
3 participants