Autocomplete multiple tags are not rendering when value exists and options is empty Array

[tt0mmy]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The AutocompleteElement tags are not rendering properly compared to the regular controlled Autocomplete from @mui/material

Expected behavior 🤔

The tags should be rendered properly like it did in version 6.

I suspect it's because of this https://github.com/dohomi/react-hook-form-mui/blob/master/packages/rhf-mui/src/AutocompleteElement.tsx#L210

Can we return just newValue instead of mapping it to matchOptionByValue?

              return (
                multiple
                  ? (Array.isArray(newValue) ? newValue : []) : newValue

One workaround is to always include the transform prop.

              transform={{
                input(value) {
                  return value ?? [];
                },
                output(event, value, reason, details) {
                  return value;
                },
              }}

Steps to reproduce 🕹

The AutcompleteElement should render the tags like the Autocomplete component. When the value is present and the options are empty Array, the tags are still rendered properly in the regular Autocomplete component. This behavior should be the same for the AutocompleteElement component.
https://codesandbox.io/p/sandbox/great-minsky-f8jvcn?file=%2Fsrc%2FDemo.tsx%3A23%2C41

[sadik-malik]

@tt0mmy, the link https://codesandbox.io/p/sandbox/great-minsky-f8jvcn?file=%2Fsrc%2FDemo.tsx%3A23%2C41 is not accessible. Could you set up a new CodeSandbox?

[tt0mmy]

@tt0mmy, the link https://codesandbox.io/p/sandbox/great-minsky-f8jvcn?file=%2Fsrc%2FDemo.tsx%3A23%2C41 is not accessible. Could you set up a new CodeSandbox?

can u try this again https://codesandbox.io/p/sandbox/great-minsky-f8jvcn

[sadik-malik]

@tt0mmy add multiple prop to the AutocompleteElement and remember to keep the previously selected options in the options prop.

Let me know if this helps.

<AutocompleteElement
          name="testing"
          label="TESTING"
          options={opts ?? []}
          required
          textFieldProps={{
            error: true,
            helperText: "Helper text goes here",
          }}
          multiple
          autocompleteProps={{
            size: "small",
            clearOnBlur: true,
            freeSolo: true,
            onInputChange(event, value, reason) {
              setReason(value);
              setTimeout(() => {
                setOpts((previous) => [
                  ...previous,
                  {
                    label: `${Math.random().toString()}`,
                    id: `${Math.random().toString()}`,
                  },
                ]);
              }, 300);
            },
          }}
        />