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

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

Closed
vijayganeshpk opened this issue Feb 5, 2024 · 1 comment · Fixed by #3362
Labels
🐛 Type: Bug Something isn't working

Comments

@vijayganeshpk
Copy link

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 vijayganeshpk added the 🐛 Type: Bug Something isn't working label Feb 5, 2024
@vijayganeshpk
Copy link
Author

vijayganeshpk commented Mar 26, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🐛 Type: Bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant