React-select: Getting `opacity: 0` on input after select value

[nottoseethesun]

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.

[jhyman2]

I'm seeing this too.

[MaxDeAngelis]

I am seeing the same here :( Any thoughts on how to fix this besides an important tag?

[slackday]

Same for me when using <AsyncSelect> with both value and inputValue set. If I remove one or the other it works like it should. But I need to support both... digging deeper...

edit
After spending hours finding this issue I can't have much energy to solve it right now. Tried setting opacity: 1 using styles prop and input as suggested in the styling but it doesn't get applied to the input tag.

As mentioned above

  #react-select-2-input {
    opacity: 1 !important;
  }

edit

Changed CSS (to support multiple selects)

  input[id^='react-select-'] {
    opacity: 1 !important;
  }

Works. It will have to do for now.

[raymondsze]

I got the same issue. Seems the opacity should be removed? Not sure its usage...

[anakis]

Same issue here

[SampsonCrowley]

@JedWatson can you explain why this opacity style is being set?

[charinduedirisuriya]

@JedWatson facing the same issue here, can you explain as to why this is happening and a better workaround?

[jreyes33]

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

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

[jakehong0521]

@jreyes33 I was trying to fix it and was attempting

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

Could you care to explain why you had to put the style for input like that?

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

[SampsonCrowley]

@jreyes33 thanks for the work around, but I'd still like to know why an opacity is even being set in the first place. @JedWatson?

[ebonow]

Greetings all, I have addressed this in several other places and started a discussion about making this potentially easier but the approach is fairly straight forward to roll on your own.

In regards to the opacity, @jreyes33 's approach will work but can also be addressed by creating a custom Input to override the isHidden prop that is passed to it.

const Input = props => <components.Input {...props, isHidden: false } />

/* NOTE: Make sure this component's declaration does not exist 
in the scope of the Select's render method 
or it will rerender the input every time state is changed */

As one would expect, this would collide with the SingleValue or MultiValue which can be addressed with the prop controlShouldRenderValue={false}

In regards to clearing the input, unfortunately the prop clearInputOnBlur was removed, so you would need to make a controlled input so we can override the inputValue when an option is selected or when the input is blurred.

  const [value, setValue] = useState();
  const [inputValue, setInputValue] = useState("");

  const onInputChange = (inputValue, { action }) => {
    // onBlur => setInputValue to last selected value
    if (action === "input-blur") {
      setInputValue(value ? value.label : "");
    }

    // onInputChange => update inputValue
    else if (action === "input-change") {
      setInputValue(inputValue);
    }
  };

  const onChange = (option) => {
    setValue(option);
    setInputValue(option ? option.label : "");
  };

Here is the corresponding sandbox which allows the user to freely type and edit into the input as would be expected behavior of an input.

That said, there is a dedicated discussion to share more thoughts if this were to be an internal prop to manage this, but in lieu of that, it is possible to accomplish this nonetheless.

As such, I will be closing this issue as more discussion about this can be had in the discussions channel with the provided link above.