When using isSearchable prop as false, the placeholder/input container is not stylable anymore

I’m using react-select as a Dropdown Menu in my Navbar. For this I applied some custom styles, among others I use this here:

  const customStyles = {
    ...,
    input: () => ({
      position: 'absolute',
      width: 0,
      height: 0,
      opacity: 0,
      pointerEvents: 'none',
    }),
    ...['placeholder', 'singleValue', 'indicatorSeparator'].reduce((acc, currVal) => {
      acc[currVal] = () => ({
        display: 'none',
      });
      return acc;
    }, {}),
  };

When I set the isSearchable prop to true, the “input” is not stylable anymore. This makes sense since there is no input anymore (only a dummyInput) but there should be some style key exposed to make the display of the currentSelection/dummyInput stylable.

I also tried display: none on the valueContainer but when I do this, the whole Dropdown doesn’t show anymore.

I’m using v2, but the same issue occurs when using v3.

Am I missing something or does this need an implementation?

[ebonow]

Greetings @domvo ,

You are correct that the dummyInput does not receive the same styling as the input, nor does it receive a className from classNamePrefix.

To apply styling to it, you can though still apply it from the ValueContainer styling using a nested styled component syntax

const styles = {
  valueContainer: (css, state) => ({ ...css, 
    input: { /* your styles go here for both input and dummyInput */ },
    'input[readonly]': { /* your styles go here for only the dummyInput */ },
  }
}

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

It’s really not intuitive and I will try to ensure that this type of thing is addressed in a future release in documentation or in enabling styling on the dummyInput.

[pedromdav-old]

I’m facing the same issue. I have something similar to this (https://codesandbox.io/s/green-cookies-0d6v8?file=/example.js) in my application and the placeholder on mobile is always followed by a blank line because of the dummyInput that gets placed when isSearchable is false. Using const Input = () => null; in conjunction with isSearchable={true} doesn’t work because that way the menu doesn’t open at all. In my particular case giving position: absolute to that dummyInput would solve the issue but, unfortunately, it’s not possible as the styles do not get applied. Maybe the solution would be to always apply the input styles to whatever input component gets rendered, even when isSearchable is false and the dummy input is used, that way the user can decide how it should function.