Skip to content
This repository has been archived by the owner on Jul 12, 2024. It is now read-only.

FilterPicker does not forward all props to Search component #6062

Closed
tomalec opened this issue Jan 13, 2021 · 0 comments · Fixed by #6880
Closed

FilterPicker does not forward all props to Search component #6062

tomalec opened this issue Jan 13, 2021 · 0 comments · Fixed by #6880
Labels
focus: components Issues for woocommerce components focus: marketing Related to Marketing Features needs: documentation The issue/PR requires documentation to be added. type: bug The issue is a confirmed bug.

Comments

@tomalec
Copy link
Member

tomalec commented Jan 13, 2021

Describe the bug
I'm trying to set up a <FilterPicker> with a Search for a custom type. I'm not able to, as for custom type I have to provide autocompleter to the <Search> component, but <FilterProvider> does not forward this config. That results in

react-dom.min.js?ver=16.13.1:61 Uncaught Error: Invalid autocompleter provided to Search component, it requires a completer object when using 'custom' type.
    at Search.getAutocompleter (index.js:77)
    at Search.render (index.js:148)
    at Ie (react-dom.min.js?ver=16.13.1:104)
    at rh (react-dom.min.js?ver=16.13.1:103)
    at zj (react-dom.min.js?ver=16.13.1:228)
    at Th (react-dom.min.js?ver=16.13.1:152)
    at tj (react-dom.min.js?ver=16.13.1:152)
    at Te (react-dom.min.js?ver=16.13.1:146)
    at react-dom.min.js?ver=16.13.1:61
    at unstable_runWithPriority (react.min.js?ver=16.13.1:25)

To Reproduce
Steps to reproduce the behavior:

  1. Create <filterPicker> with subfileter that contains a Search for custom type:
     <FilterPicker config={
          label: 'Show',
          staticParams: [ 'period' ],
          param: 'programs',
          filters: [
              {
                  label: 'All Google programs',
                  value: 'all',
              },
              {
                  label: __( 'Single program', 'google-listings-and-ads' ),
                  value: 'single',
                  subFilters: [
                      {
                          component: 'Search',
                          value: 'single_program',
                          path: [ 'select_program' ],
                          settings: {
                              type: 'custom',
                              param: 'programs',
                              getLabels: getProgramLabels,
                              labels: {
                                  placeholder: 'Type to search for a program',
                                  button: 'Single Program',
                              },
                              autocompleter: {
    							  //example from the docs https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#usage
                                  name: 'fruit',
                                  // The prefix that triggers this completer
                                  triggerPrefix: '~',
                                  // According to https://github.com/WordPress/gutenberg/tree/master/packages/components/src/autocomplete#usage
                                  // this could be an Object,
                                  // but wc-admin#Search https://woocommerce.github.io/woocommerce-admin/#/components/packages/search/README?id=search
                                  // requires a function
                                  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 render, with a specified autocompleter.

Screenshots

Desktop (please complete the following information):

  • OS: [e.g. iOS] Win10
  • Browser [e.g. chrome, safari] Chrome, FF

Additional context
I found this bug investigating #6061. So, the given autocomplete config may not work anyway, but at least should bo provided to the Search component.

@tomalec tomalec added type: bug The issue is a confirmed bug. focus: components Issues for woocommerce components 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
@jconroy jconroy added the focus: marketing Related to Marketing Features label Feb 2, 2021
tomalec added a commit that referenced this issue Apr 25, 2021
Allow, to use the `custom` type of search, previously it was complaining about lack of `autocompleter`, even though it was provided.

Fixes: #6062.
tomalec added a commit that referenced this issue Apr 25, 2021
Allow, to use the `custom` type of search, previously it was complaining about lack of `autocompleter`, even though it was provided.

Fixes: #6062.
jeffstieler added a commit that referenced this issue Apr 27, 2021
* Add a Basic test for FilterPicker.

Test that it renders the basic storybook example without throwing an error.
Move `path` in Storybooks example to a parameter, to allow setting it in unit tests.

* Forward `autocompleter` prop from `FilterPicker` to `Search`.

Allow, to use the `custom` type of search, previously it was complaining about lack of `autocompleter`, even though it was provided.

Fixes: #6062.

* Add changelog entry.

* Move `FilterPicker` config creation closer to tests that use it.

* Remove unused type prop from `FilterPicker` tests.

Addresses https://github.com/woocommerce/woocommerce-admin/pull/6880/files#r620285400.

* Add changelog note also to `CHANGELOG.md`.

Co-authored-by: Jeff Stieler <[email protected]>
tomalec added a commit to woocommerce/google-listings-and-ads that referenced this issue May 20, 2021
tomalec added a commit to woocommerce/google-listings-and-ads that referenced this issue Nov 25, 2021
as those fixes were released in `@woocommerce/components`:
- woocommerce/woocommerce-admin#6890,
- woocommerce/woocommerce-admin#6062
Remove no longer needed dependencies.
ObliviousHarmony pushed a commit to woocommerce/woocommerce that referenced this issue Mar 18, 2022
…erce/woocommerce-admin#6880)

* Add a Basic test for FilterPicker.

Test that it renders the basic storybook example without throwing an error.
Move `path` in Storybooks example to a parameter, to allow setting it in unit tests.

* Forward `autocompleter` prop from `FilterPicker` to `Search`.

Allow, to use the `custom` type of search, previously it was complaining about lack of `autocompleter`, even though it was provided.

Fixes: woocommerce/woocommerce-admin#6062.

* Add changelog entry.

* Move `FilterPicker` config creation closer to tests that use it.

* Remove unused type prop from `FilterPicker` tests.

Addresses https://github.com/woocommerce/woocommerce-admin/pull/6880/files#r620285400.

* Add changelog note also to `CHANGELOG.md`.

Co-authored-by: Jeff Stieler <[email protected]>
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
focus: components Issues for woocommerce components focus: marketing Related to Marketing Features needs: documentation The issue/PR requires documentation to be added. type: bug The issue is a confirmed bug.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants