Change the select tag from AntDesign

Question

I have the next component in my application:

const Demo = () => {
  const [value, setValue] = useState(null);

  const clear = () => setValue(null);

  return (
    <div>
      <Select
        mode={"multiple"}
        value={value}
        onChange={setValue}
        allowClear={false}
        placeholder="PERMANENT TEXT"  //i want to make vissibile this text permanent even i select an item from select tag
        style={{ width: "200px" }}
        showSearch={false}
        //  defaultActiveFirstOption={false}
      >
        <Option value="jack">Jack</Option>
        <Option value="lucy">Lucy</Option>
        <Option value="tom">Tom</Option>
      </Select>
      <button onClick={clear}>reset</button>
    </div>
  );
};

 const Demo = () => { const [value, setValue] = useState(null); const clear = () => setValue(null); return ( <div> <Select mode={"multiple"} value={value} onChange={setValue} allowClear={false} placeholder="PERMANENT TEXT" //i want to make vissibile this text permanent even i select an item from select tag style={{ width: "200px" }} showSearch={false} // defaultActiveFirstOption={false} > <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Option> <Option value="tom">Tom</Option> </Select> <button onClick={clear}>reset</button> </div> ); };

I try to achieve next:
1. I try to make the placeholder visible permanent when i open the application, but now a tag still as the first item, but i want to hide it.

And to show every time:

I tried defaultActiveFirstOption={false} but it does not happens.

2. When i will choose one of the option i don't want do output the value in Select input like this:
   But i want to see PERMANENT TEXT like in the image before this.
   Question: How to achieve the the above targets?
   demo: https://codesandbox.io/s/select-with-search-field-ant-design-demo-03506?file=/index.js:186-787

Answer 1

I think the problem is useState(null); . The default state should be undefined. You just need to change it to useState();

https://codesandbox.io/s/select-with-search-field-ant-design-demo-mew2p