Material UI Autocomplete component issue working with check

Question

I have a Material UI autocomplete component with a checkbox component. How can I get both of them working such that only when a user selects an option from the autocomplete, the checkbox should get checked. Here is the link to my component:

https://codesandbox.io/embed/material-demo-forked-of2cz?codemirror=1

https://codesandbox.io/s/material-demo-forked-of2cz?from-embed=&file=/demo.tsx

Answer 1

You should change your component like this :

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
import Checkbox from "@material-ui/core/Checkbox";

const options = ["Option 1", "Option 2"];

export default function ControllableStates() {
  const [value, setValue] = React.useState<string | null>("");
  const [inputValue, setInputValue] = React.useState("");
  const [checked, setChecked] = React.useState<boolean>(false);
  const [text1, setText1] = React.useState("");
  const [text2, setText2] = React.useState("");
  const isTextFieldsNotEmpty = text1.length > 0;

  const handleFirstTextChange = (
    event: React.ChangeEvent<HTMLInputElement>
  ) => {
    setChecked(!checked)
    setText1(event.target.value);
  };

  return (
    <div>
      <div>{`value: ${value !== null ? `'${value}'` : "null"}`}</div>
      <div>{`inputValue: '${inputValue}' '${checked}' '${text1}'`}</div>
      <br />
      <Checkbox
        checked={checked}
        onChange={handleFirstTextChange}
        inputProps={{ "aria-label": "primary checkbox" }}
      />
      <Autocomplete
        value={value}
        onChange={(event: any, newValue: string | null) => {
          setValue(newValue);
          setChecked(!checked)
        }}
        inputValue={inputValue}
        onInputChange={(event, newInputValue) => {
          setInputValue(newInputValue);
        }}
        id="controllable-states-demo"
        options={options}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField
            {...params}
            onChange={handleFirstTextChange}
            label="Controllable"
            variant="outlined"
          />
        )}
      />
    </div>
  );
}

I just have put the setChecked inside the same event listener than your textfield. That would create the behaviors you search when the user select a field is checking the checkbox.

Answer 2

i finally got my autocomplete/checkbox to work and be all checked by default (redux & ts)

const HIDDEN_USERS: HiddenUsersProps[] = store.getState().user.hiddenUsers
 // array of objects
 //{
 //  uid:"oKW8wDsasYdssdd1wTLggsas02"
 //  userName:"Matt"
 //}
const [value, setValue] = useState<HiddenUsersProps[]>([])

//the only way i found to wait for the values from the redux store 
useEffect(() => {
    setValue(HIDDEN_USERS)
}, [HIDDEN_USERS])

const handleChange = (newValue: HiddenUsersProps[]) => {
    setValue(newValue)
}

return (
    <Autocomplete 
        options={HIDDEN_USERS}
        value={value}
        onChange={(_, newValue: HiddenUsersProps[]) => handleChange(newValue)}
        getOptionLabel={(option: any) => option.userName}
        isOptionEqualToValue={(option, value) => option.userName === value.userName}
        renderOption={(props, option, { selected }) => (
            <li {...props}>
                <Checkbox icon={icon}
                    checkedIcon={checkedIcon}
                    checked={selected} />
                {option.userName}
            </li>
        )}
        renderInput={(params) => (
            <TextField {...params}
                label="Hidden Users"
                placeholder="Name"
                variant="outlined" />)} />
)

"@mui/material": "^5.0.6",