Unable to change react-select selected value color when menu is clicked

[sheikhumar93]

I am using react-select to select and search from a list. I need to change the text color of the selected text (that is visible in the search box) to gray when the user clicks on the search box and intends to search for a new option while letting it remain black when the user clicks out of the search box/has selected a new option.

I can change the color of the text by modifying the style for singleValue in the styles prop. But cannot change the color when the search menu is selected. Tried some other options too but the text color does not change when the search menu is in the selected state.

<Select
  components={{
    DropdownIndicator: () => null,
    IndicatorSeparator: () => null,
  }}
  placeholder="Search Names"
  onChange={selectName}
  options={namesList}
  styles={{
    singleValue: (styles, state) => {
      return {
        ...styles,
        color: state.isSelected ? "gray" : "black",
      };
    },
  }}
/>;

Any suggestions what I am doing wrong here?

[adeeb1]

I am also having this issue. I found the logic for the color change here, and it is tied to the theme. Even after setting the :active pseudo class using custom styles, it doesn't seem to be working. Ideally I could avoid creating a new theme, but it seems that might be necessary with how the code works now.

[sheikhumar93]

@adeeb1 I created this small function and called it with styles={customStyles()} in my Select component. I checked with React Dev Tools and only the control component has the property menuIsOpen which tracks whenever a user clicks/taps on the search bar.

const customStyles = () => {
  let menuOpen = false;
  return {
    control: (styles, state) => {
      menuOpen = state.menuIsOpen;
      return { ...styles };
    },
    singleValue: (styles, _) => {
      let color = "black";
      if (menuOpen) {
        color = "gray";
      } else {
        color = "black";
      }
      return {
        ...styles,
        color: color,
      };
    },
  };
};

I just set the color to gray but of course you can do something more fancy with this as well.