[BUG] - Autocomplete with dynamic AutocompleteSection and AutocompleteItem displays "Did you mean to call this expression?"

[vijayganeshpk]

NextUI Version

2.2.9

Describe the bug

Hello team,

Getting same issue as #1503 but with Autocomplete

import { Autocomplete, AutocompleteItem, AutocompleteSection } from "@nextui-org/react";
import { useState } from "react";
const data = [
  {
    id: 1,
    name: "Cat 1",
    cats: [
      {
        id: 1,
        name: "Cat 1.1",
      },
      {
        id: 2,
        name: "Cat 1.2",
      }
    ]
  },
  {
    id: 2,
    name: "Cat 2",
    cats: [
      {
        id: 3,
        name: "Cat 2.1",
      },
      {
        id: 4,
        name: "Cat 2.2",
      }
    ]
  }
];

function App() {
  const [category, setCategory] = useState<number>();
  return (
    <div className="flex">
      <Autocomplete label="Categories" placeholder="Search categories..." value={category} onChange={(e) => setCategory(Number(e.target.value))}
        className="max-w-xs" defaultItems={data}>
        {(c) => <AutocompleteSection key={`c${c.id}`} title={c.name} items={c.cats}>
          {/* get "Did you mean to call this expression?" in the below line" */}
          {(i) => <AutocompleteItem key={`sc${i.id}`} value={i.id}>{i.name}</AutocompleteItem>}
        </AutocompleteSection>}
      </Autocomplete>
    </div>
  )
}

export default App

VS Code complains as follows:

Type '(i: { id: number; name: string; }) => Element' is not assignable to type '(ItemElement<{ id: number; name: string; }> | ItemElement<{ id: number; name: string; }>[] | ItemRenderer<{ id: number; name: string; }>) & ReactNode'.
  Type '(i: { id: number; name: string; }) => Element' is not assignable to type 'ItemRenderer<{ id: number; name: string; }> & string'.
    Type '(i: { id: number; name: string; }) => Element' is not assignable to type 'string'.ts(2322)

App.tsx(42, 12): Did you mean to call this expression?

Kindly note I able to run the application just fine and able to see the expected output / functionality in the browser.

Context:

Sample repository: https://github.com/vijayganeshpk/bug-nextui-automplete-autocompletesection

"dependencies": {
    "@nextui-org/react": "^2.2.9",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@typescript-eslint/eslint-plugin": "^6.14.0",
    "@typescript-eslint/parser": "^6.14.0",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.55.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "tailwindcss": "^3.4.1",
    "typescript": "^5.2.2",
    "vite": "^5.0.8"
}

Your Example Website or App

https://github.com/vijayganeshpk/bug-nextui-automplete-autocompletesection

Steps to Reproduce the Bug or Issue

1. Setup React project with Tailwind and NextUi
2. Utilize Autocomplete, AutocompleteItem and AutocompleteSection with any hierarchical data
3. VS Code complains Type '(i: { id: number; name: string; }) => Element' is not assignable to type 'string'. and Did you mean to call this expression?

Expected behavior

As a user, I expected the code does not make the IDE to show any issues, but it does.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[vijayganeshpk]

This seems to be the case whenever we try to use dynamic elements under sectional components: AutocompleteSection, ListboxSection etc as given in the sample (ref: #2505 ).

Confirming the issue persists in nextui version 2.2.10

Only workaround seems to be to use arraymap instead of collection components api.