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

[domvo]

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?

[Komalov]

@domvo please share a workaround if you will find one. Facing the same

[domvo]

My “workaround“ unfortunately is to not turn off the isSearchable functionality. :-/

[Slapbox]

Might not help you at all, but try styling singleValue instead of input. I'm still struggling to figure out exactly how the two are used and when what the user sees is input as opposed to singleValue.

[crhayes]

I have isSearchable={false} and it's still rendering an input... and no matter what I do I can't stop it from rendering OR target it with CSS to hide it.

[Slapbox]

@crhayes try replacing the input with a React component that returns null. See these docs: https://react-select.com/components

[pedromdav]

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.

[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.

[ebonow]

@crhayes try replacing the input with a React component that returns null. See these docs: https://react-select.com/components

Unfortunately, the dummyInput is used to hold the available visible space for the div as both the singleValue and placeholder are positioned absolutely. You would need to ensure both those components are alotted the proper height to display the full text height.

More on this on the next use case.

[ebonow]

Greetings @pedromdav

Indeed there is an extra space created by the dummyInput in your codesandbox, because you are using a div instead of a component.Placeholder. Since the placeholder text no longer has position: absolute applied to it (which is what would happen if you wrapped your text in a component.Placeholder) which is why it pushes down the height of the ValueContainer.

This extra space is the space that is supposed to be allocated for the Placeholder and SingleValue since both are positioned absolute. So now what...

Well, if you set dummyInput to display: none or instead render null, the focus events won't fire and you won't be able to open the menu.

If you set dummyInput to height: 0, then the space will be removed from the bottom, but you will have an issue when selecting an option as shown in this screenshot:

Since you positioned the Placeholder in the document flow, I'd recommend the same approach with singleValue which can be done by removing the position: absolute, top, and transform values.

Here is the result

I added a long option as well to show that the control's height adjusts with the option just like it does with the placeholder.

[ebonow]

I'll be closing this so that we can continue to work through existing issues. Please feel free to open a discussion in Q&A if any other questions arise or feel free to reply here if something is unclear.