feat(apollo-vertex): add standalone FilterDropdown component#433
feat(apollo-vertex): add standalone FilterDropdown component#433creilly11235 wants to merge 1 commit intomainfrom
Conversation
creilly11235
requested review from
frankkluijtmans and
ruudandriessen
and removed request for
a team
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Dependency License Review
License distribution
Excluded packages
|
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
ruudandriessen
left a comment
ruudandriessen
left a comment
There was a problem hiding this comment.
The dropdown shifts when values are selected - this is because it's centered at the "middle" of the dropdown at the moment, which means that when the content changes the dropdown also shifts.
Instead, I'd propose we anchor the dropdown differently (likely the "left" side should stick to the dropdown's left as well)
Replace the limited DataTableFacetedFilter with a versatile FilterDropdown that supports multi-select, single-select, built-in search, and works both standalone and with TanStack Table columns. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
| align = "start", | ||
| popoverWidth = "w-[220px]", | ||
| }: FilterDropdownProps<TData, TValue>) { | ||
| "use no memo"; |
| align = "start", | ||
| popoverWidth = "w-[220px]", | ||
| }: FilterDropdownProps<TData, TValue>) { | ||
| "use no memo"; |
Check warning
Code scanning / CodeQL
Unknown directive Warning
Show autofix suggestion
Hide autofix suggestion
Copilot Autofix
AI about 2 hours ago
In general, to fix an “Unknown directive” problem, you either (1) correct the directive string to a valid, intended directive (e.g., "use strict"), or (2) remove the stray directive-like string if no directive is needed. Here, "use no memo" is not a recognized directive in JavaScript, React, or TypeScript, and there’s no indication that a real directive (like "use strict" or "use client") was intended inside this component.
The best fix without changing functionality is simply to delete the standalone "use no memo"; line. The component is a regular React function component, and removing this no-op string will not alter any runtime behavior because the string is neither read nor assigned. This change is limited to the body of FilterDropdown in apps/apollo-vertex/registry/filter-dropdown/filter-dropdown.tsx, specifically at line 78, between the function parameter destructuring and the comment // React Compiler compat: TanStack Table Column objects have stable references with mutable state. No new methods, imports, or definitions are required.
| @@ -75,7 +75,6 @@ | ||
| align = "start", | ||
| popoverWidth = "w-[220px]", | ||
| }: FilterDropdownProps<TData, TValue>) { | ||
| "use no memo"; | ||
| // React Compiler compat: TanStack Table Column objects have stable references with mutable state. | ||
| const [open, setOpen] = useState(false); | ||
| const [searchQuery, setSearchQuery] = useState(""); |
4 participants
Summary
FilterDropdownregistry component supporting multi-select, single-select, built-in search, and optional TanStack Table column integrationDataTableFacetedFilterwithFilterDropdownin the data-table registry🤖 Generated with Claude Code