React select 自定义输入不会隐藏占位符

Question

I am following the React Select docs to alter the Input component of the Select (to add more properties I need to the default input:

const Input = ({ innerProps }) => {
  return <input {...innerProps} {...somethingElseINeed} />;
};

const CustomSelect = props => {
  return (
    <Select components={{ Input }}></Select>
  );
};

It does add a custom input, however it:

1. Lacks any of the styles and aria attributes the original input has.
2. Doesn't hide a placeholder when focused.

I tried to use getStyled and theme properties that shoold come by default, but no luck.

Any idea what I am missing?

Answer 1

1)

What about aria props, you can get it from input props, that has appropriate view

2)

if you look at react-select components tree you will see that RS paste placeholder into another component

and you can remove placeholder on focus like that just add styles with using state:

const styles = {
   placeholder(base, state) {
    return {
      ...base,
      display: state.isFocused && 'none',
    };
  }
}