Any way to use InputBase with Autocomplete with multiple items?

Question

I'm using an autocomplete inside the MUI DataGrid in edit mode, but due to TextField it renders additional borders.

        <Autocomplete
          multiple
          freeSolo
          value={value || []}
          onChange={(event, newValue) => {
            api.setEditCellValue({ id, field, value: newValue }, event);
          }}
          options={['aaa', 'bbb']}
          renderInput={(params) => <TextField {...params} />}
          fullWidth
        />

What I'm doing when there is no Autocomplete is to use a InputBase instead, but here I tried multiple attempts with renderInput property, the input displays but the logic of selected items as chips does not exist (which in a way can make sense since it's a raw input).

Do you know a proper way to reuse all the TextField logic, but without the wrapping element MuiFormControl?

(in the meantime I will patch the CSS to make like more proper)

Thank you,

Nikolay Kazmirchuk · Accepted Answer · 2025-01-21 11:05:58Z

You can customize the TextField to look like this without wrapping it in a MuiFormControl. This is if it is the appearance that bothers you.

Something like this:

    <Autocomplete
      multiple
      freeSolo
      value={value || []}
      onChange={(event, newValue) => {
        api.setEditCellValue({ id, field, value: newValue }, event);
      }}
      options={['aaa', 'bbb']}
      renderInput={(params) => (
        <TextField
          {...params}
          variant="standard" // Use a variant with no FormControl border
          InputProps={{
            ...params.InputProps,
            disableUnderline: true,
}}
          sx={{
            '& .MuiFormControl-root': {
              display: 'unset',
            },
          }}

      placeholder="Type something"
    />
  )}
/>

If you need to use InputBase, you can try this:

    <Autocomplete
      multiple
      freeSolo
      value={value || []}
      onChange={(event, newValue) => {
        api.setEditCellValue({ id, field, value: newValue }, event);
      }}
      options={['aaa', 'bbb']}
      renderTags={(tagValue, getTagProps) =>
        tagValue.map((option, index) => (
          <Chip
            key={option}
            label={option}
            {...getTagProps({ index })}
          />
        ))
      }
      renderInput={(params) => {
       const {InputProps, ...rest} = params
        return (
          <InputBase
            {...rest}
            {...InputProps}
            inputRef={params.InputProps.ref}
            placeholder="Type something"
            fullWidth
          />
        )
}}
    />

And also, you need to pass to BaseInput not just params, but extract parameters from there specifically for the field (params.InputProps) and do not forget to also specify inputRef

Collectives™ on Stack Overflow

Any way to use InputBase with Autocomplete with multiple items?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related