Autocomplete with TextField sloteProps - maxLength - issue

[yanai101]

Steps to reproduce

Link to live example: (required)

use Autocomplete with solo + try to limit the max length in the input

  <Autocomplete
        multiple
        id="tags-filled"
        options={top100Films.map((option) => option.title)}
        defaultValue={[top100Films[13].title]}
        freeSolo
        renderTags={(value, getTagProps) =>
          value.map((option, index) => {
            const { key, ...tagProps } = getTagProps({ index });
            return (
              <Chip variant="outlined" label={option} key={key} {...tagProps} />
            );
          })
        }
        renderInput={(params) => (
          <TextField
            {...params}
            slotProps={{
              htmlInput: { maxLength: 4 },
            }}
            variant="filled"
            label="freeSolo"
            placeholder="Favorites"
          />
        )}
      />

Steps:

1. type any value in the input text
2. press enter

BTW -

inputProps={{
                  ...params.inputProps,
                  maxLength: 5 // Limit input to 5 characters
                }}

work as expected

Current behavior

the value stays on the screen - not disappear and not added to the chips does

Expected behavior

value need to be added to the chips list

Context

i try to limit the length of the char in the chips

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: maxLength, Autocomplete

[mj12albert]

@yanai101 Sorry your sandbox crashes immediately when I focus the <input> element 😓

i try to limit the length of the char in the chips
You should do it here:

renderTags={(value, getTagProps) =>
          value.map((option, index) => {
            const { key, ...tagProps } = getTagProps({ index });
            return (
              <Chip variant="outlined" label={option} key={key} {...tagProps} />
            );
          })
        }

extract the children or displayed text from the "Tag" out of tagProps before passing it into the Chip

The maxLength attribute passed to the input element could not affect anything outside of itself here

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.