Getting `opacity: 0` on input after select value

Basically, after selecting a value from the react-select v2 dropdown (basic dropdown 1-1 with single-option html select; e.g., no creating options, no multi-options, etc), the value in the input box disappears because something in react-select v2 is setting the input element itself to opacity: 0.

This only happens for me when the value was non-empty-string when the component first rendered.

I noticed that in the case where a different react-select input but with the same config had an empty-string input value at first render, the issue does not exist.

I worked around simply with an !important css directive to override what react-select v2 is doing.

Sorry, I do not have a reproduction available at this point to share.

[jreyes33]

If using the new styles API, you can do something like this in the styles prop:

{
  input: (provided) => ({
    ...provided,
    input: {
      opacity: "1 !important",
    },
  }),
}

[jreyes33]

Yeah, @jakehong0521. If you do it that way, you’re only applying the styles to the containing div, not to the input element itself. Adding the input: {} object in the styles works because it creates a nested selector that targets the actual input element.