CODEWITHSUNDEEP
javascriptreactjsmaterial-uionchange
igor sharfman
igor sharfman

Reputation: 13

Material-ui Autocomplete - OnChange is blocking other features to work

I am trying to work with the Autocomplete component,

this is my code:

 <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={ownerOptions2}
      disableCloseOnSelect
      filterSelectedOptions={true}
      getOptionLabel={(option) => option.title}
      onChange={(event, newValue) => {
        console.log(newValue);
 ** ****props.onSelectionChange(newValue)***** **
            }}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="label" placeholder="" />
      )}
    />

Without the "onChange" part, it's working great. But I need to save and do something with the selected values, (is there another way to do it?).

When I'm adding the "onChange" part and run there a function from props, neither the filterSelectedOptions nor the checkbox is working.

What is the right way to do it?

Tnx

Upvotes: 1

Views: 813

Answers (1)

Ben Stephens
Ben Stephens

Reputation: 3371

My guess (based on https://material-ui.com/components/autocomplete/#controllable-states ) is that if you specify onChange or value you need to supply both (and therefore handle the state of value yourself).

Upvotes: 2

Related Questions