How to render option labels differently when focused?

[ericmorand]

I am currently using react-select in its unstyled form, and I can't figure how to render the focused option labels that are displayed in the menu - typically when the end-user uses the keyboard to navigate through the option.

I know about the formatOptionLabel method that is expected to return a node, but it does not receive the focused state of the option; and I know about the classNames.option method that receives the focused state but is only expected to return a class name; last, I know about the styles.option method, but it is expected to return some style values which is a violation of the separation of concern - i.e. the style is controlled by the application instead of the stylesheet.

What I need is a way to render an option label depending on the focused state.

Can anybody help me find the proper way to achieve this?

[ArianMakiabadi]

In react-select, formatOptionLabel is for what gets rendered, and classNames / styles are for how it looks. The focused option is intentionally treated as a styling concern, so isFocused is not passed into formatOptionLabel.

If you need to change the rendered label based on focus without using the styles prop, the correct approach is to override the internal Option component and use the state it already receives.

Example:

import Select, { components } from "react-select";

function Option(props) {
  const { isFocused, isSelected, label } = props;

  return (
    <components.Option {...props}>
      <span
        className={[
          "optionLabel",
          isFocused && "optionLabel--focused",
          isSelected && "optionLabel--selected",
        ]
          .filter(Boolean)
          .join(" ")}
      >
        {label}
      </span>

      {isFocused ? <span className="optionHint">↵</span> : null}
    </components.Option>
  );
}

export default function MySelect(props) {
  return (
    <Select
      {...props}
      unstyled
      components={{ Option }}
      classNames={{
        option: ({ isFocused, isSelected }) =>
          [
            "option",
            isFocused && "option--focused",
            isSelected && "option--selected",
          ]
            .filter(Boolean)
            .join(" "),
      }}
    />
  );
}

and your css would look similar to:

.option {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.optionLabel--focused {
  font-weight: 600;
  text-decoration: underline;
}

.optionHint {
  opacity: 0.7;
  font-size: 1rem;
}