ECHOES-1422 Allow custom component on FilterDropdown categories items

[gregaubert]

Part of

---

Summary by Gitar

• New category type:
  • Added FilterDropdownCategoryWithContent to support rendering arbitrary custom components in the right panel.
• Improved component logic:
  • Updated FilterDropdown and FilterDropdownRightPanel to handle keyboard navigation (ArrowLeft) within custom content.
  • Added selectionCount support for custom categories, as item counts cannot be auto-derived.
• Testing and documentation:
  • Added unit tests for custom content rendering and focus management.
  • Included a Date Range example in FilterDropdown-stories to demonstrate the new functionality.

_{This will update automatically on new commits.}

[netlify]

✅ Deploy Preview for echoes-react ready!

Name	Link
🔨 Latest commit	d8c08ce
🔍 Latest deploy log	https://app.netlify.com/projects/echoes-react/deploys/6a4cacdff07e900008504496
😎 Deploy Preview	https://deploy-preview-727--echoes-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[hashicorp-vault-sonar-prod]

ECHOES-1422

[gregaubert]

gitar auto-apply:on

[gregaubert]

gitar auto-apply:off

[gitar-bot]

Code Review ✅ Approved 2 resolved / 2 findings

Extends FilterDropdown with custom component support for categories, enabling richer UI like date ranges. Addresses keyboard navigation hijacking and missing focus fallbacks identified during review.

✅ 2 resolved

✅ Edge Case: ArrowLeft in custom content hijacks native input navigation

📄 src/components/filters/FilterDropdownRightPanel.tsx:112-126
In FilterDropdownRightPanel, handleCustomContentKeyDown intercepts every ArrowLeft keypress that bubbles up from anywhere inside the custom content and unconditionally calls e.preventDefault() + onCategoryFocusBack(). This conflicts with native keyboard behavior of focusable descendants. For example, the story's DateRangeContent renders <input type="date"> (and text inputs / textareas are equally common in custom content): the ArrowUp/ArrowDown/ArrowRight keys still adjust the date segment natively, but ArrowLeft is swallowed and jumps focus back to the left panel instead of moving within the input. This produces inconsistent, surprising behavior and effectively makes text/date fields inside custom content partially unusable via the keyboard.

Consider only treating ArrowLeft as "navigate back to category" when the event target is the wrapper itself (or otherwise not an editable/native control), e.g. by checking e.target === customContentRef.current, or by excluding inputs/textareas/selects and contenteditable elements. That keeps left↔right panel navigation working while letting focusable descendants handle their own arrow keys.

✅ Bug: onFocusContent fallback documented but not implemented

📄 src/components/filters/FilterDropdownRightPanel.tsx:85-93 📄 src/components/filters/FilterDropdownTypes.ts:134-141
The JSDoc for onFocusContent states: "When omitted, the first focusable element in the panel is focused automatically." However, the implementation does not do this. In focusFirstItem, the custom-content branch is:

if (hasCustomContent) {
  activeCategory?.onFocusContent?.();
} else {
  listRef.current?.focusFirstItem();
}

When onFocusContent is undefined, the optional call is a no-op and nothing receives focus. A keyboard user who presses ArrowRight/Enter on a custom-content category gets no focus movement into the panel — focus silently stays on the left-panel category. This is both an accessibility regression and a documentation contract violation (any consumer relying on the documented automatic fallback will find it broken).

Either implement the documented fallback (focus the first focusable descendant of the content wrapper) or update the JSDoc to state that focus does not move when onFocusContent is omitted.

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change the behavior for this request:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}

[sonarqube-next]

Quality Gate passed

Issues
0 New issues
0 Fixed issues
0 Accepted issues

Measures
0 Security Hotspots
0 Dependency risks
90.2% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube