[Autocomplete] Expose autocomplete props in renderTags/renderOption function

[ajpopplestone]

To add more flexibly to the renderTags/renderOptions function in the Autocomplete component, expose the autocomplete props in the render function parameters.

Examples 🌈

<Autocomplete renderTags={(value, getTagProps, autocompleteProps) => { const { someCustomProp } = autocompleteProps // do something }} someCustomProp={[1, 2, 4]} .... >

Motivation 🔦

Currently I'm trying to conditionally render the styling of a tag dependent on if the value is present in an array held in state.
This array is external to the Autocomplete component so there is no way I can see to access this in the renderTags function.
This would also allow for custom clickHandlers to be passed to the tag components.
The library react-select has this functionality.
Let me know your thoughts and if you have a better way to accomplish what I'm trying to do, thanks!

[oliviertassinari]

@ne4rly0ne I'm not following, what stop you to provide the state to the renderTags method?

The library react-select has this functionality.

Do you have more details?

[ajpopplestone]

@ne4rly0ne I'm not following, what stop you to provide the state to the renderTags method?

On review, it is possible to refactor the code so state is provided to the renderTags, however, I'm trying to recreate a react-select component and the api for that is more straight forward. Since the documentation for autocomplete is 'meant to be an improved version of the "react-select"', I thought I would suggest this.

In custom render functions in react-select all props passed to the main component are available, in addition to the data for that component. A codesandbox example is below.
https://codesandbox.io/s/fe1ec?module=/example

I believe having all autocomplete props available in the arguments passed to the render functions would give flexibly when creating components.

My apologies if I have not explained this well.

[oliviertassinari]

@ne4rly0ne Ok, great, thanks for the extra details. So it's related to the composition API and the customization of nested slots. We cover some of the problems in #21453. The plan is to have a componentsProps API to allow developers to inject custom props to each customization slot. We didn't make it generic as react-select for isolation purposes. It should make it easier to maintain the code.

In our case, we don't expose a component, but a render function, so it's simpler. You can do the following:

const renderTags = (props) => (tagValue, getTagProps) => <div />;

<Autocomplete
  renderTags={renderTags({
    someCustomProp: [1, 2, 4],
  })}
>

Or even simpler, have the props in the global scope.

[ajpopplestone]

Thanks @oliviertassinari clarifies nicely.