Hey there! I’ve run into this exact quirk with Creatable react-select before, so I know how frustrating it can be when your input text (like "two" in your case) vanishes when you click outside the component, only to reappear when you focus back in. Let’s break down how to fix this.

The Root Cause #

By default, CreatableSelect clears the input field when it loses focus if the entered text hasn’t been turned into a selectable option. The component does remember the value internally though, which is why it pops back up when you refocus. To make the text stay visible even after blurring, we need to take manual control of the input value state.

Step-by-Step Solution #

Here’s how to adjust your component to retain the input text on blur:

1. Add state to track the input value
   First, create a state variable to hold the input text so we can control it directly:

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

2. Bind the state to the CreatableSelect component
   Pass the inputValue state and an onInputChange handler to the component to sync state updates with user input:

   <CreatableSelect
     // Your existing props here (options, value, onChange, etc.)
     inputValue={inputValue}
     onInputChange={(newValue) => setInputValue(newValue)}
   />
   

3. Handle option creation properly
   When the user creates a new option, make sure to clear the input value manually (since we’re controlling it now):

   onCreateOption={(value) => {
     // Add your logic to create and save the new option
     const newOption = { value, label: value.charAt(0).toUpperCase() + value.slice(1) };
     // Update your options list and selected value
     setOptions(prev => [...prev, newOption]);
     setSelectedOption(newOption);
     // Clear the input field after creation
     setInputValue("");
   }}
   

Full Modified Component Example #

Putting it all together, your component would look something like this:

import React, { useState } from "react";
import CreatableSelect from "react-select/creatable";

export default function App() {
  const [options, setOptions] = useState([{ value: "one", label: "One" }]);
  const [selectedOption, setSelectedOption] = useState(null);
  const [inputValue, setInputValue] = useState("");

  return (
    <div className="App">
      <CreatableSelect
        options={options}
        value={selectedOption}
        onChange={setSelectedOption}
        inputValue={inputValue}
        onInputChange={(newValue) => setInputValue(newValue)}
        onCreateOption={(value) => {
          const newOption = { value, label: value.charAt(0).toUpperCase() + value.slice(1) };
          setOptions(prev => [...prev, newOption]);
          setSelectedOption(newOption);
          setInputValue("");
        }}
      />
    </div>
  );
}

With these changes, the input text (like "two") will stay visible even when you click outside the select component, and it will only clear when you create a new option (or manually modify the state if needed).

内容的提问来源于stack exchange，提问作者Matt Holland