Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiselect does not respect controlled "inputValue" param #98

Open
mehdiirh opened this issue Feb 11, 2025 · 0 comments
Open

Multiselect does not respect controlled "inputValue" param #98

mehdiirh opened this issue Feb 11, 2025 · 0 comments

Comments

@mehdiirh
Copy link

mehdiirh commented Feb 11, 2025

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant