CODEWITHSUNDEEP
javascriptreactjsreact-select
Ben_Sven_Ten
Ben_Sven_Ten

Reputation: 579

Getting back the value of a `cleared` input element with React Select

I have a several ReactSelect components, and one piece of global state which is responsible for holding all my selected values in an array.

Select

      <Select
        styles={inputStyles}
        className="basic-single"
        classNamePrefix="select"
        isClearable={true}
        isSearchable={false}
        placeholder={'Select Your Most Convenient Time Slot'}
        options={newHoursArr}
        isMulti={false}
        onChange={(values) => handleChange(values)}

        defaultValue={clientServiceReferral.selectedTimeSlots.map((referral) => (
          referral.timeSlot === timeWithDate ? (
            { ['label']: referral.value, ['value']: referral.value }
          ) : null
        ))}
      />

handleChange function

  const handleChange = (value) => {

    const found = clientServiceReferral.selectedTimeSlots.find(element => element.timeSlot === timeWithDate);

    if (found) {
      clientServiceReferral.selectedTimeSlots.splice(found, 1)
    }

    const newValue = {
      timeSlot: timeWithDate,
      value: value.value
    }

    setClientServiceReferral({
      ...clientServiceReferral,
      selectedTimeSlots: [...clientServiceReferral.selectedTimeSlots, newValue]
    })
  }

ReactSelect has an isClearable prop. Which allows users to clear the input with a button click. This returns a value of null when values is logged in the onChange function, but is there a way to return the actual value inside the select that is getting cleared when the clear button is clicked?

Upvotes: 0

Views: 860

Answers (2)

Ben_Sven_Ten
Ben_Sven_Ten

Reputation: 579

For anyone interested, Via Joshua Wood's answer, the value of any cleared item(s) can be found as so:

onChange={(values, removedValue) => handleChange(values, removedValue)}

  const handleChange = (value, removedValue) => {

    if (removedValue.action === 'clear') {
      console.log('removed', removedValue.removedValues[0])
    }
// removedValues returns an array

Upvotes: 0

Joshua Wood
Joshua Wood

Reputation: 535

There's an optional second parameter passed to the onChange event. It's of this type:

export interface ActionMetaBase<Option> {
  option?: Option | undefined;
  removedValue?: Option;
  removedValues?: Options<Option>;
  name?: string;
}

Now, I've never used this library, but it looks like removedValue or removedValues could be helpful? idk.

Anyway, I got that from their docs. Hope it works out for you:

Upvotes: 2

Related Questions