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.

Sign up for GitHub

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

Jump to bottom

[Bug]: typecheck bug on the DataTableFacetedFilter example #327

Open
2 tasks
maelp opened this issue Feb 5, 2024 · 11 comments · May be fixed by #329
Open
2 tasks

[Bug]: typecheck bug on the DataTableFacetedFilter example #327

maelp opened this issue Feb 5, 2024 · 11 comments · May be fixed by #329
Labels
bug Something isn't working

Comments

@maelp
Copy link

maelp commented Feb 5, 2024

Reproduction

None

Describe the bug

When using the code from the Task table example DataTableFacetedFilter I have the following issue

image 
<Command
        :filter-function="
          (list: DataTableFacetedFilter['options'], term) =>
            list.filter((i) => i.title.toLowerCase()?.includes(term))
        "
      >

I'm using the latest radix-vue, but it seems that filter-function first parameter should use "AcceptableValue[]" list, which contains string, number, object etc, but it doesn't typecheck for an arbitrary object for some reason(?)

System Info

System:
    OS: macOS 14.1.2
    CPU: (8) arm64 Apple M1
    Memory: 95.53 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.10.0 - ~/.nvm/versions/node/v20.10.0/bin/node
    Yarn: 1.16.0 - ~/.node/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v20.10.0/bin/npm
    pnpm: 8.15.0 - ~/Library/pnpm/pnpm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 121.0.6167.139
    Safari: 17.1.2
  npmPackages:
    @vueuse/core: 10.7.1 => 10.7.1
    radix-vue: 1.4.0 => 1.4.0
    vue: 3.4.7 => 3.4.7

Contributes

  • I am willing to submit a PR to fix this issue
  • I am willing to submit a PR with failing tests
@maelp maelp added the bug Something isn't working label Feb 5, 2024
@romanhrynevych
Copy link
Collaborator

@maelp can you hover over underlined red text and show error too, please)

@maelp
Copy link
Author

maelp commented Feb 8, 2024

image

@romanhrynevych romanhrynevych linked a pull request Feb 8, 2024 that will close this issue
Draft
@maelp
Copy link
Author

maelp commented Feb 8, 2024

image

@romanhrynevych
Copy link
Collaborator

thanks, will take a look on it)

@maelp
Copy link
Author

maelp commented Feb 8, 2024

BTW adding ":string" to term doesn't fix the bug for me (taking a look at your PR)

@maelp
Copy link
Author

maelp commented Feb 8, 2024

image

@romanhrynevych
Copy link
Collaborator

Yes, it just little issue so never mind, I will remove draft status when resolve it)
#327 (comment)

@romanhrynevych
Copy link
Collaborator

@maelp To fix this issue you need to define Option interface globally and pass it inside ComboboxRootProps in Command.vue, this will remove error inside your editor

image image image

Need to think about how to fix it globally, because issue is inside radix-vue components, when you don't define T it takes default value of AcceptableValue which is

export type AcceptableValue = string | number | boolean | object;

It's logical that Option extends object, but VS Code internal TS Server don't think so 😞

Will try to think with it, maybe need to fix radix-vue TS types 🤔

@sadeghbarati maybe you will look and have some ideas, I will appreciate it ❤️

@maelp
Copy link
Author

maelp commented Feb 8, 2024

Interesting... indeed I didn't know whether the issue was that the method is expecting any AcceptableValue and typescript is complaining that we are only handling the case where the filterFunction parameter is of type DataTableFacetedFilter['option'] and not the other cases that it thinks could happen (eg string, number, etc)... wondering if that's the issue? in that case it should be generic?

@romanhrynevych
Copy link
Collaborator

No, issue is that typescript don't think that our custom object for option is object 😁

In my codebase I never use object definition, because it not just Objects. Functions, Arrays is also type of object is JS, think that maybe replace object to type Record<string, any> will help with this 🤔

@romanhrynevych romanhrynevych mentioned this issue Feb 8, 2024
Merged
@tuanalumi
Copy link

tuanalumi commented May 14, 2024 •
edited

Is this fixed? I am still getting the type error on filterFunction. Not sure how to get it right..

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: add type to term param in filter-function Command prop romanhrynevych/shadcn-vue
3 participants
@maelp @tuanalumi @romanhrynevych