Skip to content

add new component RHFCountry #9

@2qp

Description

@2qp

Proposed Key Features

  • 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 list search 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.

Metadata

Metadata

Assignees

Labels

featureNew functionality or enhancementstodoTask that hasn’t started yet

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions