Skip to content

Multiselect does not respect controlled "inputValue" param #98

@mehdiirh

Description

@mehdiirh

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":

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions