React-select: [Option] [v2] Adding `data` as an attribute of type `OptionProps`

[t49tran]

Hi, thanks for the great library.

I use react-select on couple of projects at work and all of our team member love it.

Recently, I ran into a problem when I try to use customising components with react-select. When I customise / extend Option component, there is a type error complaining that data attribute is not available.

For example:

const customComponents = {
      Option: props =>
        components.Option && (
          <components.Option {...props}>
            <CustomOption option={props.data} />
          </components.Option>
        )
};

As I check the type definition for Option component, I found out the data attribute is not available here:

export type OptionProps = PropsWithStyles &
  CommonProps &
  State & {
    /** The children to be rendered. */
    children: Node,
    /** Inner ref to DOM Node */
    innerRef: InnerRef,
    /** props passed to the wrapping element for the group. */
    innerProps: InnerProps,
    /* Text to be displayed representing the option. */
    label: string,
    /* Type is used by the menu to determine whether this is an option or a group.
    In the case of option this is always `option`. */
    type: 'option',
  };

I believe the data attribute should be there, as it's passed to the Option component in the implementation here:

return (
        <Option {...commonProps} {...props} isFocused={isFocused}>
          {this.formatOptionLabel(props.data, 'menu')}
        </Option>
);

I reckon we can add the data attribute to the flow type definition. I am happy to make a PR if required. Once it's done, I also believe that we can update the Typescript definition in DefintelyTyped here as well.

[sahibjotsaggu]

@t49tran How are you using customComponents?

[t49tran]

@sahibjotsaggu, as I've already said in the post:

const customComponents = {
      Option: props =>
        components.Option && (
          <components.Option {...props}>
            <CustomOption option={props.data} />
          </components.Option>
        )
};

[sahibjotsaggu]

@t49tran That's not using customComponents, that's just defining it. Where and how are you using it?

[t49tran]

@sahibjotsaggu, it doesn't make any sense to me what you are asking for and how it is relevant to the topic.

<Select components={customComponents}>

Can you please explain how I use the customComponents is related to or effect the fact that the data attribute is being missed from the type definition ?

[sahibjotsaggu]

Maybe it doesn't work because customComponents isn't a valid prop for the Select element?

[t49tran]

@sahibjotsaggu I edited the post, I used it as components. I don't think you understand the issue that I raised, I didn't say that components doesn't work, it works completely fine.

What I said is the data attribute is being missed from the type definition, and it's an improvement that should be made.

[sahibjotsaggu]

@t49tran Okay, can you submit a PR with the fix?

[t49tran]

@sahibjotsaggu, I created one.

[IanVS]

I believe this was fixed in https://github.com/JedWatson/react-select/pull/3154, would someone mind closing the issue if so?