Open tt0mmy opened 3 months ago
@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, 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
@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);
},
}}
/>
Duplicates
Latest version
Current behavior 😯
The
AutocompleteElement
tags are not rendering properly compared to the regular controlledAutocomplete
from @mui/materialExpected 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 tomatchOptionByValue
?One workaround is to always include the
transform
prop.Steps to reproduce 🕹
The
AutcompleteElement
should render the tags like theAutocomplete
component. When the value is present and the options are empty Array, the tags are still rendered properly in the regularAutocomplete
component. This behavior should be the same for theAutocompleteElement
component. https://codesandbox.io/p/sandbox/great-minsky-f8jvcn?file=%2Fsrc%2FDemo.tsx%3A23%2C41