The 'defaultInputValue' prop of AsyncSelect in react-select?

user_10433612 0
Viewed 563
import AsyncSelect from 'react-select/async';

<AsyncSelect
              cacheOptions
              isClearable={false}
              defaultInputValue={doctor.name}
              loadOptions={async (search, callback) => {
                const doctors = await fetchDoctors(search);
                const doctorsList = doctors.map(item => ({
                  ...item,
                  label: item.doctorName,
                  value: item.doctorName,
                }));
                callback(doctorsList);
              }}
              backspaceRemovesValue
              placeholder='Search for a doctor...'
              onChange={async (newVal) => {
                const updatedOrder = { ...order };
                updatedOrder.doctorId = newVal.id;
                if (newVal.organization) {
                  updatedOrder.organization = newVal.organization;
                } else {
                  updatedOrder.organization = '';
                }
                updateOrderRemote(updatedOrder, newVal);
              }}
/>

The 'defaultInputValue' prop on the initial render gets passed with an undefined or empty string or a string.

However, after some interval doctor.name is available, however the defaultInputValue does not update hence maintaining the value on initial render.

react-select reactjs
2 Answers

You have two options: 1- You can make the render of the whole <AsyncSelect {...props} /> conditional to availability of doctor.name (which i assume is a state). Which i guess is not ideal for you. 2- You should pass inputValue prop instead of defautInputValue. Because as far as i know, default value is only passed in first render. So you need to change your onChange prop's function aswell to change the state that is being used as an initial value

user_147213560

As suggested by Ardalan Nahavendi I went the local state route.

But touching the inputValue prop caused another set of problems, so I went with the value prop.

Code:

import AsyncSelect from 'react-select/async';

  const [doc, updateDoctor] = useState({ label: doctor?.name, value: doctor?.name });

  useEffect(() => {
    if (doctor.doctorName) { //at initial render the doctor prop gets the 'doctorName' key 
      updateDoctor({ label: doctor?.doctorName, value: doctor?.doctorName });
    } else {
      updateDoctor({ label: doctor?.name, value: doctor?.name });
    }
  }, [doctor]);

<AsyncSelect
  cacheOptions
  isClearable={false}
  value={doc}
  loadOptions={async (search, callback) => {
    const doctors = await fetchDoctors(search);
    const doctorsList = doctors.map(item => ({
      ...item,
      label: item.doctorName,
      value: item.doctorName,
    }));
    callback(doctorsList);
  }}
  backspaceRemovesValue
  placeholder="Search for a doctor..."
  onChange={async (newVal) => {
    updateDoctor(newVal); //has the label and value present due to loadOptions
    const updatedOrder = { ...order };
    updatedOrder.doctorId = newVal.id;
    if (newVal.organization) {
      updatedOrder.organization = newVal.organization;
    } else {
      updatedOrder.organization = '';
    }
    updateOrderRemote(updatedOrder, newVal);
  }}
/>
user_104336120
Related