Hide current value on focus of react-select - reactjs

Question

When a user sets focus on the edit box of a single-selection react-select component, the currently-selected option will continue to be shown until the user types a key. I don't like this behavior. Instead I'd like do to what Google does which is to clear the edit box on focus.
How to do this?
I noticed there's a long-open issue in the react-select GitHub repo, but the solutions on that issue seem either complex or have UX tradeoffs that I'd like to avoid.

Answer 1

It took some experimentation, but the easiest solution was creating a custom SingleValue component that renders no content when the menu is open. Posting the answer here to save the time of others who may run into the same problem.
Note that the text shown isn't actually in the edit box. It's a separate HTML element of static text that's hidden by the library when the user types. I'm just accelerating that process. :-)
Live example
import { Fragment, useState } from "react";
import Select, { components } from "react-select";
const options = [
{ label: "one", value: 1 },
{ label: "two", value: 2 },
{ label: "three", value: 3 }
];
export default function App() {
const [selectedOption, setSelectedOption] = useState(options[1]);
return (
<Select
options={options}
components={{ SingleValue }}
value={selectedOption}
onChange={setSelectedOption}
placeholder="Pick a number"
/>
);
}
/** Hide the selected value when showing the dropdown list */
function SingleValue(props) {
const { children, ...rest } = props;
const { selectProps } = props;
if (selectProps.menuIsOpen) return <Fragment></Fragment>;
return <components.SingleValue {...rest}>{children}</components.SingleValue>;
}
// For TypeScript, declare like this:
// function SingleValue<T>(props: SingleValueProps<T, false>) {
If you want to show a placeholder instead of a blank edit box, you can just return your placeholder in place of children. Like this: (live example)
/** Show a placeholder instead of the selected value when showing the dropdown list */
function SingleValue(props) {
const { children, ...rest } = props;
const { selectProps } = props;
let contents = children;
if (selectProps.menuIsOpen) {
contents = selectProps.placeholder ? (
<div style={{ color: "#999" }}>{selectProps.placeholder}</div>
) : (
<Fragment></Fragment>
);
}
return <components.SingleValue {...rest}>{contents}</components.SingleValue>;
}
It's a shame that the docs for each react-select prop are so limited and they lack a table of contents to easily navigate. It's really full-featured once you figure out how the advanced stuff works like replacing custom components. If you're considering contributing feature PRs to that library, consider enhancing the docs too!