why checkbox is not checked in react?

Question

I am trying to implement Auto complete having checkbox.

https://material-ui.com/components/autocomplete/#autocomplete

but when I am implementing same component in final-form I am not able to checked my option why ?

here is my code https://codesandbox.io/s/relaxed-breeze-hv58o

<Autocomplete
      {...rest}
      multiple={multiple}
      disableCloseOnSelect={true}
      options={
        multiple
          ? maxReached
            ? []
            : options.filter(option => !value.includes(option.value))
          : options
      }
      defaultValue={
        multiple
          ? options.filter(option => value.includes(option.value))
          : options.find(option => option.value === value)
      }
      onChange={
        multiple
          ? (_e, values) => {
              setMaxReached(value.length >= max - 1);
              onChange(values.map(option => option.value));
            }
          : (_e, option) => onChange(option.value)
      }
      getOptionLabel={option => option.label}
      noOptionsText={
        maxReached
          ? formatMessage({ id: "components.autocomplete.max" }, { max })
          : formatMessage({ id: "components.autocomplete.no" })
      }
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.label}
        </React.Fragment>
      )}
      renderInput={params => (
        <TextField
          {...params}
          {...restInput}
          label={label}
          placeholder={placeholder || ""}
          helperText={
            hasError ? formatMessage({ id: error }, { label }) : helperText
          }
          error={hasError}
          fullWidth
        />
      )}
    />
  );
};

i think yes... i just copy any paste from here material-ui.com/components/autocomplete/#autocomplete — user944513
– user944513, Commented Jan 20, 2020 at 23:52
You should just try hard coding the value to start to see if that is the issue. Just replace selected with true and then let's go from there. — Nicholas Porter
– Nicholas Porter, Commented Jan 20, 2020 at 23:53
Also the value selected needs to come from some sort of state, whether it's component state or if you're using Redux. — Nicholas Porter
– Nicholas Porter, Commented Jan 20, 2020 at 23:54
yes it is boolean..issue is this function not called again renderOption={(option, { selected }) => ( <React.Fragment> <Checkbox icon={icon . when user checked any item — user944513
– user944513, Commented Jan 20, 2020 at 23:55

Mohamed Youssef · Accepted Answer · 2020-01-21 03:29:50Z

4

You have some issues with your code (fixed version):

You are calling onChange that makes React-Final-Form re-render, which leads for Autocomplete component to re-render, and remove the select state. To fix this, you will have to use getOptionSelected option.

getOptionSelected={(option, value) => {
    return option.value === value.value;
}}
options={ 
    options
}
onChange={(_e, values) => {
    onChange(values);
}

You are filtering options based to Autocomplete component, so selected option gets filtered out. so from this:

options={
  multiple
  ? maxReached
  ? []
  : options.filter(option => !value.includes(option.value))
  : options
}

To

options={
   options
}

edited Jan 21, 2020 at 3:29

answered Jan 21, 2020 at 3:24

Mohamed Youssef

1611 gold badge1 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Public Profile Over a year ago

MUI-RFF is a reusable component library for Material UI + React Final Form, which includes the Autocomplete component. This excellent answer has been copied into the example app. Thanks!

Mohamed Youssef Over a year ago

@JonStevens, thanks for your sweet words :). I am glad to help.

Collectives™ on Stack Overflow

why checkbox is not checked in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related