How to add a title attribute only to the input-tag looking part of the dropdown

[thmi-inx]

I just want a title to add as a tooltip when there is not label displayed for the dropdown.
There might be an obvious solution, but i am just not able to find it.

The currently implemented solution wraps the react-select in a span with a title-attribute. This can't be right. Not only is it a weird solution but, it adds the title behaviour to the options as well. (At least to the part of the "custom" options that are not defining their own title)

[ebonow]

Greetings @thmi-inx ,

The input component by default is only 2px wide when there is no input so it may not be useful for adding the title attribute there unless you also modify this to fill the length of the ValueContainer (note: This will be fixed in v5).

You would likely want to add the title attribute to the ValueContainer itself.

codesandbox

const ValueContainer = (props) => {
  const innerProps = { ...props.innerProps, title: "Whatever" };
  return <components.ValueContainer {...props} innerProps={innerProps} />;
};

const App = (props) => {
  return (
    <>
      <Select options={basicOptions} components={{ ValueContainer }} />
    </>
  );
};

[thmi-inx]

Exactly what I needed, thank you =).

On a side note, the title will not show when the dropdown ist disabled. This is not really an issue in my case, but it would be nice to have. At least this is how the title on an input-tag is behaving.

[ebonow]

@thmi-inx the reason for this is because the container has pointer-events: 'none' when the select isDisabled.

react-select/packages/react-select/src/components/containers.tsx

Line 38 in e6ff154

pointerEvents: isDisabled ? 'none' : undefined, // cancel mouse events when disabled

This can be overridden with styling if you want to change this behavior but the impact is that other elements may be impacted such as hover styles and clearing selected values.

const styles = {
  container: css => ({ ...css, pointerEvents: undefined })
};

return <Select styles={styles} {...otherProps} />

Hope this gives you a step in the right direction for your implementation.

[thmi-inx]

Thanks for the additional Information. =)