Can I hide the warning: Select: Keys "{key}" passed to "selectedKeys" are not present in the collection?

[Canciller]

Can I hide the warning: Select: Keys "{key}" passed to "selectedKeys" are not present in the collection?

[isaacdarcilla]

One reason for this is data type is not matching, can you post the related code here?

[Canciller]

I am fetching the items async, but i already have selectedKeys state with an initial value, the Select works, it is just annoying

[francispires]

I'm too, I don't know why but I can get rid this message removing selectedKeys and change the value to a no typed Set
//const [values, setValues] = useState(new Set([""]));
const [values, setValues] = useState(new Set([""]));
<Select
classNames={{
innerWrapper: "h-auto",
}}
endContent={!clean(Array.from(values)).length || }
className={cn(className)}
isMultiline={true}
size={"lg"}
label={props.label}
selectionMode={props.selectionMode || "multiple"}
placeholder={props.placeholder}
/* selectedKeys={values || []}*/
items={items}
scrollRef={scrollerRef}
isLoading={isLoading}
onOpenChange={setIsOpen}
onChange={handleSelectionChange}
renderValue={(items) => {
return (

{items.map((item) => (
{item.textValue}
))}

);
}}
>

            {items.map((item) => (
                <SelectItem textValue={item.value || JSON.stringify(item)} key={item.value || JSON.stringify(item)} value={item.value}>
                    {item.text}
                </SelectItem>
            ))}

        </Select>

[ADSNB]

This thread is a few months old but I got the same problem.

Basically I have two Select components.

The behavior is: When the first select component change the second select component will be updated with a new list of options.

For me this error will happen wherever the update happens on the second select when the second select already have an selected value.

Basically the message is right the old selected value is not there but how can I update the component to get ride of this message?

The logic is simple but the nextui component seems to be faulty or something is missing.

[jimmyzzxhlh]

+1 on this issue when asynchronous data loading is combined with using the Select component. I've tried various approaches to ensure that the selection key always exists in the list, but still got this really annoying warning.

[ShakedGolan10]

Is someone knows how to remove this warning??

[SabirovaOlya]

Hi everyone,

I have had such error, and I have solved it with changing key value type from integer to string:

  {selectedCompetition && (
      <Select
          label="Competition"
          color='white'
          className="bg-white w-full"
          defaultSelectedKeys={[selectedCompetition?.value?.toString()]}
          value={[selectedCompetition?.value?.toString()]}
          onChange={(e) => {
              const selectedComp = competitions.find(x => x.value === Number(e.target.value));
              setSelectedCompetition(selectedComp);
          }}
      >
          {competitions?.map((comp) => (
              <SelectItem key={comp?.value?.toString()} className='bg-white'>
                  {comp?.label}
              </SelectItem>
          ))}
      </Select>
  )}

With this change default value is selected, before I used for key item id(int), then I changed the type of data to string with toString() function and problem was solved)))