Link not working inside AutoCompleteItem

[srivatsa17]

I am trying to do something like this inside the AutoComplete component but my link is not working.
Also i am getting warning like this on the console <Item> with non-plain text contents is unsupported by type to select for accessibility. Please add a textValue prop.
How can i fix this ?

import { Autocomplete, AutocompleteItem, Link } from "@nextui-org/react";

<AutoComplete
 ...
>
  {(category) => (
    <AutocompleteItem
      key={category.name ?? ""}
      value={category.name}
      className="capitalize"
    >
      <Link
        href={`/${category.slug}`}
        underline="none"
        color="foreground"
      >
        {category.name}
      </Link>
    </AutocompleteItem>
  )}
</AutoComplete>

[isaacdarcilla]

You can do something like this.

import { Autocomplete, AutocompleteItem, Link } from "@nextui-org/react";

<AutoComplete
 ...
>
  {(category) => (
    <AutocompleteItem
      key={category.name ?? ""}
      value={category.name}
      className="capitalize"
      onSelectionChange={() => {
         router.push('link here')
      }}
    >
        {category.name}
    </AutocompleteItem>
  )}
</AutoComplete>

[srivatsa17]

You can do something like this.

import { Autocomplete, AutocompleteItem, Link } from "@nextui-org/react";

<AutoComplete
 ...
>
  {(category) => (
    <AutocompleteItem
      key={category.name ?? ""}
      value={category.name}
      className="capitalize"
      onSelectionChange={() => {
         router.push('link here')
      }}
    >
        {category.name}
    </AutocompleteItem>
  )}
</AutoComplete>

Thanks for the response! I tried this and its working now. I don't know if its the right approach though

{(category) => (
    <AutocompleteItem
        ...
        as={Link}
        href=`my link`
    >
        {category.name}
    </AutocompleteItem>
)}

[Arshia-123]

I'm facing the exact same issue but when placing the Link within a NavbarItem, seems like Links don't work well with items.

I keep getting this warning aswell,

console.js:213 with non-plain text contents is unsupported by type to select for accessibility. Please add a textValue prop.

I fixed it by using OnClick() and useNavigate but its an issue which should be checked out.

[robpetty]

Is there a better understanding why this happens and the fix? Basically the "fix" is pass in a prop that is just text.

However when you want to make a custom view this won't work. For example I am using and in the <AutocompleteItem ... /> I have some TSX and get this same error:

with non-plain text contents is unsupported by type to select for accessibility. Please add a textValue prop.

In my case, it still pops up, see the choices, can select and even the choice has the little selected icon on it. However, it does prevent the "at-rest" view from working correctly. It will still show your placeholder value and not that value of what you just selected.

So more broadly, since this use case is not about an action (like clicking a button) but rather just custom display of data, whats the workaround? Even if you take the example from the docs:

https://nextui.org/docs/components/autocomplete#custom-items

And strip it down, it has same issue. Even a simple

test

will replicate it (as content of the .

Here is a simple repo:

<Autocomplete
  label="Make a choice"
  className="mb-2"
  placeholder="Your choices"
>
  <AutocompleteItem key="1" value="1">
    <div className="flex flex-row">test</div>
  </AutocompleteItem>
  <AutocompleteItem key="2" value="2">
    <div className="flex flex-row">test2</div>
  </AutocompleteItem>
</Autocomplete>

Maybe I should open a bug on this?

[robpetty]

Ok, the answer was simple, the road to it was not. After posting I hit the discord and then the docs one more time, and totally realized I did not have textValue set. Normally I don't set it all, and that is because it seems you do not need to in most cases because the "normal" case is, you pass text value into the child. When you pass in TSX/JSX however, it can't infer its textual value and gives the error. Simply adding the attribute fixes the issue:

[timsntech]

@robpetty worked for me, thanks!