React - MUI Autocomplete single selection remove event

hossein fti 0
Viewed 22

I use material UI autocomplete to create a single-select dropdown. But the problem is that when I click the close button placed right-side of the input, the onChange event didn't call and my state didn't update. While in the multi-select mode this event successfully occurred. Someone helps me to use the remove event in single-select mode.

This is my single select:

<Autocomplete<Option<T>>
      onChange={(e: any, newValue) => {
        if (newValue) {
          handleChangeValue(newValue.value);
        }
      }}
      sx={{ ...sx }}
      id={id}
      options={options}
      isOptionEqualToValue={(newValue, option) =>
        newValue.value === option.value
      }
      defaultValue={
        defaultValue && {
          value: defaultValue,
          label: options.find((option) => option.value === defaultValue)?.label,
        }
      }
      value={
        value && {
          value: value,
          label: options.find((option) => option.value === value)?.label,
        }
      }
      getOptionLabel={(option) => option.label || `${option.value}`}
      renderOption={(props, option, { selected }) => (
        <li value={option.value} {...props}>
          <Checkbox
            style={{ marginRight: 8 }}
            checked={selected}
            id={`${option.value}`}
          />
          {option.label || `${option.value}`}
        </li>
      )}
      renderInput={(params) => (
        <TextField
          value={value}
          {...params}
          placeholder={global.translate(placeholder)}
        />
      )}
    />

this one is my multi-select autocomplete:

<Autocomplete
      onChange={(e: any, value) => {
        onChange(value);
      }}
      value={value}
      sx={{ ...sx }}
      multiple
      id={id}
      options={options}
      disableCloseOnSelect
      defaultValue={[...defaultValues]}
      getOptionLabel={(option) => option.label}
      isOptionEqualToValue={(newValue, option) =>
        newValue.value === option.value
      }
      renderOption={(props, option, { selected }) => (
        <li value={option.value} {...props}>
          <Checkbox
            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
            checkedIcon={<CheckBoxIcon fontSize="small" />}
            style={{ marginRight: 8 }}
            checked={selected}
            id={option.value}
          />
          {option.label}
        </li>
      )}
      renderInput={(params) => (
        <TextField {...params} placeholder={placeholder} />
      )}
    />
autocomplete dropdown material-ui reactjs javascript
1 Answers

In your single-select mode Autocomplete component, you send handleChangeValue if only newValue exists.

So, in your single-select mode, you need to change this code:

<Autocomplete<Option<T>>
  onChange={(e: any, newValue) => {
    if (newValue) {
      handleChangeValue(newValue.value);
    }
  }}

to this code:

<Autocomplete<Option<T>>
  onChange={(e: any, newValue) => {
    const valueToBeSent = newValue ? newValue.value : undefined;
    handleChangeValue(valueToBeSent);
  }}

in order to send onChange event on every value change.

Ahmet Emre Kılınç0
Related