Zone de texte personnalisée sur le composant Antd Select

Question

Je souhaite donner à l'utilisateur la possibilité d'ajouter du texte personnalisé si le choix qu'il juge approprié ne fait pas partie des options affichées dans l'option "Sélectionner". J'ai créé avec succès un champ de texte personnalisé, mais obtenir la saisie de l'utilisateur et le définir comme valeur d'un composant de sélection devient pénible (cela semble facile à faire, mais pour une raison quelconque, cela ne fonctionne pas) C'est ma mise en œuvre

const [selectedpurpose, setSelectedPurpose] = useState<string>("");// selected value of the select component
  const [customOption, setCustomOption] = useState<string>("");//custom userinput
  
   const [dropoptions, setDropOptions] = useState([
{ value: "General Meeting", label: "General Meeting" },
{ value: "Consultation Meeting", label: "Consultation Meeting" },
{ value: "AdCampaign Meeting", label: "Ad Campaign Meeting" },
{ value: "Marketing Meeting", label: "Marketing Meeting" },
 ]);//select options

 // function to recored custom user input
 const handleAddOption = () => {
  if (customOption) {
  const newOption = { value: customOption, label: customOption };
  setDropOptions([newOption, ...dropoptions]);
  setSelectedPurpose(customOption);
  setCustomOption("");
 }
 };
    
   //my form
   <Form.Item
          name="purpose"
          label="Purpose of Visit"
          rules={[
            {
              required: true,
              message: "Please select Purpose of Visit!",
            },
          ]}
        >
          <Select
            defaultActiveFirstOption={false}
            value={selectedpurpose}
            onChange={(e) => {
              if (customOption) {
                setSelectedPurpose(customOption);
              }else{
                setSelectedPurpose(e)
              }
            }}
            dropdownRender={(menu) => (
              <div>
                {menu}
                <div
                  style={{
                    display: "flex",
                    flexWrap: "nowrap",
                    padding: 8,
                  }}
                >
                  <Input
                    style={{ flex: "auto" }}
                    maxLength={20}
                    value={customOption}
                    onChange={(e) => {
                      if (e.target.value.length > 20) {
                        // if user has reached the maximum length
                        // show a message or change the color of the input to indicate the limit has been reached
                        // for example:
                        openNotificationWithIcon(
                          "error",
                          "Warning",
                          "Maximum length reached!"
                        );
                      } else {
                        setCustomOption(e.target.value);
                      }
                    }}
                    onKeyDown={(e) => {
                      if (e.key === "Enter") {
                        handleAddOption();
                      }
                    }}
                  />
                  <Button
                    type="link"
                    onClick={handleAddOption}
                    style={{ flex: "none", padding: "0px 4px" }}
                  >
                    Add
                  </Button>
                </div>
              </div>
            )}
          >
            {dropoptions.map((option) => (
              <Option key={option.value} value={option.value}>
                {option.label}
              </Option>
            ))}
          </Select>
        </Form.Item>

Qu'est-ce que je fais de mal, selon mon code, cliquer sur le bouton Ajouter et appuyer sur Entrée devrait ajouter la nouvelle valeur au tableau d'options et sélectionner l'entrée utilisateur comme valeur du composant de sélection, mais jusqu'à présent, il ne fait que l'ajouter. au tableau d'options et ignorer sa définition comme valeur de sélection Merci pour toute aide

Answer 1

try this one   
    
     import React from "react";
        import "./styles.css";
        import Select, { components } from "react-select";
        
        const CustomInput = (props) => {
          const { maxLength } = props.selectProps;
          const inputProps = { ...props, maxLength };
        
          return ;
        };
        
        const App = () => {
          const options = [
            { label: "Option 1", value: 1 },
            { label: "Option 2", value: 2 },
            { label: "Option 3", value: 3 }
          ];
        
          return (
            
          );
        };
        
        export default App;