Skip to content
This repository was archived by the owner on Jul 12, 2024. It is now read-only.
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

@tomalec

Description

@tomalec

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    focus: componentsIssues for woocommerce componentsneeds: author feedbackThe issue/PR needs a response from any of the parties involved in the issue.type: bugThe issue is a confirmed bug.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions