You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Virtualized List Rendering: implement a virtualized list using @tanstack/react-virtual.
Search Functionality: Include CommandInput to filter countries by provided keywords.
Keyboard Navigation: Support navigating and selecting countries, using refs to manage focus without causing re-renders.
Country Data Integration: customizable dataset via hook (Bring Your Own DataSet).
Flag Display: display country flags BYOL (Bring Your Own Library).
Accessibility (a11y): ensure the component is fully accessible, focus, and virtualized listsearch input.
Async Mounting Handling: handle async rendering (e.g., in Popover) using MutationObserver and setTimeout to ensure the virtualizer initializes correctly, addressing issues like parentRef being null.
Responsive Resizing: Use ResizeObserver to re-measure the virtualizer when the container resizes, ensuring proper rendering in dynamic layouts.
Optional Grouping: Support grouping countries by region (e.g., continents) with a type: "GROUP" structure.
TypeScript Support: Provide full TypeScript support.
Proposed Key Features
@tanstack/react-virtual.CommandInputto filter countries by provided keywords.BYOL(Bring Your Own Library).focus, andvirtualized listsearch input.Popover) usingMutationObserverandsetTimeoutto ensure the virtualizer initializes correctly, addressing issues likeparentRefbeingnull.ResizeObserverto re-measure the virtualizer when the container resizes, ensuring proper rendering in dynamic layouts.type: "GROUP"structure.