-
Notifications
You must be signed in to change notification settings - Fork 69
Description
Summary
Hello
Multiselect inputValue={} does not respect passed parameter and seems like it's creating it's own state, which leads to an uncontrolled input.
please consider a review in this line
Description
I want a controlled input.value to create Chips inside the input
( I'm not going to use this multiselect as a search field for the options, actually, I even disabled the dropdown by setting it's display to none )
so, it's something like ads.telegram.org's "channels" field, which you enter a username inside the input and then it renders as a custom component ( the Chip ).
the usecase is to not letting the user to type anything other than "backspace" inside the field in case of error. to force them to remove their previous-problematic input.
Code:
<FormControl>
<FormLabel>Target specific channels</FormLabel>
<Controller
name="channels"
control={control}
defaultValue={[]}
render={({field}) => (
<Multiselect
{...field}
{...status("channels")}
inputValue={"channelsInputValue"}
placeholder="t.me channel username"
options={[]}
creatable={true}
renderChip={(option) => (
<EntityListBoxItem
bgColor="blue.500"
entityUsername={(option.value)!.toString()}
onFetchError={(error) => {
setError("channels", {
message: error.meta.message || "Error fetching channel",
type: "server"
})
}}
/>
)
}
/>
)}/>
{errors.channels && <InputError>{errors.channels.message}</InputError>}
</FormControl>
I just passed an static value to the inputValue
, but I can still type inside the input freely, which is unexpected since by passing this parameter, it should become "controlled":