Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-opus-4-7`
Stats: 1 user messages, 32 tool calls, tools used: Bash, Read.
Conversation
Turn 1 — User
Review the following recently modified files for code quality, correctness, and adherence to project guidelines. These are part of FHIR-2219, a multi-select Document Category filter in treatment-plan/packages/tpf-national-health-records-ui.
Files to review (read each one):
1. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx
2. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.helpers.ts
3. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.hooks.ts
4. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx
5. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx
6. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx
Also check the CLAUDE.md at /Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md and the rules in .claude/rules/ for project conventions.
Report only actionable issues with file:line references. Flag: TypeScript correctness, React hook correctness, accessibility, test completeness, and any anti-patterns.
Turn 1 — Assistant
I'll review the files systematically. Let me start by reading the project conventions and then the files in question.
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/ 2>&1
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md
/Users/USER/workspace/doctolib/treatment-plan/.claude/rules/: backend build-commands.md frontend general.md infrastructure modules test-analyst-files.txt testing
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/CLAUDE.md
Tool results:
→ result (ok): 1 # CLAUDE.md
2
3 This is a full-stack healthcare treatment plan application (Kotlin/Spring Boot backend + React/TypeScript frontend) built as a modular monolith using the "hive" pattern with hexagonal architecture. It handles prescription creation, document management, and clinical workflows for the French and German markets.
4
5 Refer to @AGENTS.md for complete project overview, architecture, tech stack, and development guidelines.
6
7 ## Language Rule
8
9 All Claude stack files (C
…(truncated, 664 more chars)
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/frontend/ /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/testing/ /Users/USER/workspace/doctolib/treatment-pl …(truncated, 32 more chars)
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/general.md
/Users/USER/workspace/doctolib/treatment-plan/.claude/rules/frontend/: cda-identifiers.md i18n.md ops react storybook.md structure
/Users/USER/workspace/doctolib/treatment-plan/.claude/rules/testing/: compliance.md devex.md performance.md quick-reference.md strategy.md templates
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/frontend/react/ /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/frontend/structure/ /Users/USER/workspace/doct …(truncated, 57 more chars)
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/.claude/rules/frontend/react/: oxygen-design-system.md react-hook-form.md react.md test
/Users/USER/workspace/doctolib/treatment-plan/.claude/rules/frontend/structure/: component-patterns.md dependencies.md package-structure.md
/Users/USER/workspace/doctolib/treatment-plan/.claude/rules/testing/templates/: component-test.tsx controller-test.kt hook-test.tsx msw-handler.ts repository-test.kt security-tests.kt service-test.kt test-fixtures.ts unit-te …(truncated, 6 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx
Tool results:
→ result (ok): 1 import { ChevronDownRegularIcon } from '@doctolib/design-system-icons/ChevronDownRegularIcon'
2 import { Checkbox } from '@doctolib/design-system/Checkbox/v2'
3 import { IconButton } from '@doctolib/design-system/IconButton/v2'
4 import type { Option } from '@doctolib/design-system/Option'
5 import { useId, useMemo, useRef, useState } from 'react'
6
7 import { normalize } from './NhrDocumentCategoryFilter.helpers'
8 import { useNhrDocumentCategoryClose } from './NhrDocumentCategoryFilter.hook
…(truncated, 4075 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.helpers.ts
Tool results:
→ result (ok): 1 export const normalize = (s: string) => 2 s 3 .normalize('NFD') 4 .replace(/\p{Diacritic}/gu, '') 5 .toLowerCase() 6
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.hooks.ts
Tool results:
→ result (ok): 1 import { type RefObject, useEffect, useRef } from 'react'
2
3 export const useNhrDocumentCategoryClose = (
4 containerRef: RefObject<HTMLDivElement | null>,
5 onClose: () => void,
6 isOpen: boolean
7 ) => {
8 const onCloseRef = useRef(onClose)
9 // Sync ref every render so the stable event listeners always call the latest onClose.
10 useEffect(() => {
11 onCloseRef.current = onClose
12 })
13
14 useEffect(() => {
15 if (!isOpen) return undefined
16
17 const handle
…(truncated, 638 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx
Tool results:
→ result (ok): 1 import { setup } from '@doctolib/test-helpers'
2 import { screen } from '@testing-library/react'
3 import { afterEach, describe, expect, it, vi } from 'vitest'
4
5 import { NhrDocumentCategoryFilter } from './NhrDocumentCategoryFilter'
6
7 const sampleOptions = [
8 { value: 'A', label: 'Report A' },
9 { value: 'B', label: 'Report B' },
10 { value: 'C', label: 'Report C' },
11 ]
12
13 describe('NhrDocumentCategoryFilter', () => {
14 afterEach(() => {
15 vi.clearAllMocks()
16
…(truncated, 14044 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx
Tool results:
→ result (ok): 1 import type { Option } from '@doctolib/design-system/Option'
2
3 import { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter'
4 import type { FilterConfig } from '../../../types'
5
6 export const createNhrDocumentCategoryFilterConfig = ({
7 options = [],
8 label = 'Document Category',
9 placeholder,
10 }: {
11 options?: Option[]
12 label?: string
13 placeholder?: string
14 } = {}): FilterConfig => ({
15 key: 'typeCodes',
16 render:
…(truncated, 653 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx
Tool results:
→ result (ok): 1 import { setup } from '@doctolib/test-helpers'
2 import { screen } from '@testing-library/react'
3 import { afterEach, describe, expect, it, vi } from 'vitest'
4
5 import { mockPatientInfo } from '../../../test-helpers'
6 import { createNhrDocumentCategoryFilterConfig } from './createNhrDocumentCategoryFilterConfig'
7
8 const ctx = { patient: mockPatientInfo }
9
10 const sampleOptions = [
11 { value: 'A', label: 'Report A' },
12 { value: 'B', label: 'Report B' },
13 { value: 'C', labe
…(truncated, 4677 more chars)
Now I have a thorough understanding. Let me check additional context to verify some findings.
Tools used:
Bash:grep -rn "FilterConfig" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types* /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-h …(truncated, 64 more chars)
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts:21:/* Passed to every FilterConfig.render() — country variant casts to its own patient type / /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts:48:export type FilterConfig = { /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx:4:import type { …(truncated, 6356 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src -name "types*" -type f -o -name "types" -type d 2>&1 | head
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/ 2>&1
Tool results:
→ result (ok): index.ts NhrDocumentCategoryFilter.helpers.ts NhrDocumentCategoryFilter.hooks.ts NhrDocumentCategoryFilter.stories.tsx NhrDocumentCategoryFilter.test.tsx NhrDocumentCategoryFilter.tsx
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/types.ts
Tool results:
→ result (ok): 1 import type { DesignSystemIconComponent } from '@doctolib/design-system-icons'
2 import type { NhrDocument, NhrResultStatus } from '@doctolib/tpf-national-health-records'
3 import type { ReactNode } from 'react'
4
5 export type NhrPatientInfo = {
6 fullName: string
7 gender: 'male' | 'female' | 'other'
8 birthDate: string
9 age: number
10 }
11
12 export type ColumnConfig = {
13 key: string
14 header: string
15 sortable: boolean
16 /** Only required when sortable: true. Return
…(truncated, 3703 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/index.ts
Tool results:
→ result (ok): 1 export * from './NhrDocumentCategoryFilter' 2
Tools used:
Bash:grep -rn "useNhrDocumentCategoryClose\|onPointerDownOutside\|useOnClickOutside" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>&1 | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:8:import { useNhrDocumentCategoryClose } from './NhrDocumentCategoryFilter.hooks' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:38: useNhrDocumentCategoryClose(containerRef, close, isOpen) /Users/USE …(truncated, 214 more chars)
Tools used:
Bash:grep -rn "Option\b" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/ 2>&1 | head -20
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDateSelectionFilterConfig.tsx:2:import type { Option } from '@doctolib/design-system/Option' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDateSelectionFilterConfig.tsx:20: dateTypeOptions?: Option[] /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/bus …(truncated, 1240 more chars)
Now let me verify a couple more things — particularly the disabled field type on Option and how the design system Checkbox handles disabled clicks.
Tools used:
Bash:find /Users/USER/workspace/doctolib -path '*/design-system/Option*' -name "*.d.ts" -o -name "Option.ts" 2>/dev/null | head -5; find /Users/USER/workspace/doctolib -path '*/node_modules/@doct …(truncated, 49 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -path '*/node_modules/@doctolib/design-system/Option*' -name '*.d.ts' 2>/dev/null | head -5
Tool results:
→ result (ok): (Bash completed with no output)
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/doctolib/node_modules/cac/deno/Option.ts /Users/USER/workspace/doctolib/waiting-room/node_modules/cac/deno/Option.ts /Users/USER/workspace/doctolib/treatment-plan/node_modules/cac/deno/Option.ts /Users/USER/workspace/doctolib/oxygen/packages/b2c/src/dataEntry/Option.ts /Users/USER/workspace/doctolib/oxygen/packages/b2b/src/dataEntry/Option.ts
Tools used:
Bash:cat /Users/USER/workspace/doctolib/oxygen/packages/b2b/src/dataEntry/Option.ts 2>/dev/null | head -30
Tool results:
→ result (ok): export * from '@doctolib/design-system/Option'
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan -path '*/design-system/Option*' 2>/dev/null | head -10
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules -name "Option*" -path "*@doctolib/design-system*" 2>/dev/null | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.d.ts.map /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.js /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.d.ts /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system-b2b/dist/dataEntry/Option.js.map /Users/USER/workspace/doctolib/treatment …(truncated, 661 more chars)
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/dataEntry/private/Option.d.ts
Tool results:
→ result (ok): 1 export type Option = { 2 label: string; 3 value: string; 4 disabled?: boolean; 5 }; 6 export type OptionGroup = { 7 label: string; 8 options: Option[]; 9 disabled?: boolean; 10 }; 11 / 12 * Type guard for Option and OptionGroup 13 * @param option 14 */ 15 export declare const isOptionGroup: (option: Option | OptionGroup) => option is OptionGroup; 16 / 17 * Flattens options and option groups into an option array 18 * @param options 19 */ 20 export declare const …(truncated, 822 more chars)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -path "*Checkbox/v2*" -name "*.d.ts" 2>/dev/null | head -5
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -path "*Checkbox*v2*" -name "*.d.ts" 2>/dev/null | head -10
Tool results:
→ result (ok): (Bash completed with no output)
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -name "Checkbox*" 2>/dev/null | head -10
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/Checkbox.js.map /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/Checkbox.scss /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/Checkbox.d.ts /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/Checkbox.js /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/Chec …(truncated, 549 more chars)
Tools used:
Bash:ls /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataEntry/Checkbox/ 2>&1
Tool results:
→ result (ok): Checkbox.module.scss Checkbox.test.tsx Checkbox.tsx CheckboxGroup.module.scss CheckboxGroup.test.tsx CheckboxGroup.tsx
Tools used:
Bash:find /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system -path "*v2*Checkbox*" 2>/dev/null | head -5; find /Users/USER/workspace/doctolib/treatment-plan/node_m …(truncated, 64 more chars)
Tool results:
→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/dataDisplay/Card/v2 /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/Button/v2 /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/src/action/IconButton/v2 /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/action/Button/v2 /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design- …(truncated, 32 more chars)
Tools used:
Bash:cat /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json 2>/dev/null | python3 -c "import sys,json; d=json.load(sys.stdin); ex=d.get('exports',{}); prin …(truncated, 54 more chars)
Tool results:
→ result (ok): ./Checkbox ./Checkbox/v2 ./CheckboxGroup
Tools used:
Bash:cat /Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/package.json 2>/dev/null | python3 -c "import sys,json; d=json.load(sys.stdin); print(d['exports']['./Checkb …(truncated, 9 more chars)
Tool results:
→ result (ok): {'import': './dist/dataEntry/Checkbox/Checkbox.js', 'types': './dist/dataEntry/Checkbox/Checkbox.d.ts', 'default': './dist/dataEntry/Checkbox/Checkbox.js'}
Tools used:
Read:/Users/USER/workspace/doctolib/treatment-plan/node_modules/@doctolib/design-system/dist/dataEntry/Checkbox/Checkbox.d.ts
Tool results:
→ result (ok): 1 import { type FocusEvent } from 'react'; 2 import type { FieldState } from '../private/Field.js'; 3 import type { InputProps as InputCheckboxGroupProps } from './CheckboxGroup.js'; 4 import { type StyledComponent } from '../../common/TailwindStyle.js'; 5 export type CheckboxProps = { 6 / 7 * The element's unique identifier. 8 */ 9 id?: string | undefined; 10 / 11 * Additional message in the radio for secondary information. 12 */ 13 description?: string | …(truncated, 3960 more chars)
I have enough information to compile the review. Let me also check the React import — useEffect/useRef usage looks right but I want to double-check the useEffect without deps array (intentional for syncing the latest ref).
Let me also check one more potential concern — the useRef import in NhrDocumentCategoryFilter.hooks.ts is used but RefObject import was used as type:
Tools used:
Bash:grep -rn "test('should not call onToggle when a disabled option" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCa …(truncated, 47 more chars)
Tool results:
→ result (ok): (Bash completed with no output)
Now I have a complete picture. Here's my review.
Code Review — FHIR-2219 Document Category Filter
Scope reviewed
/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.helpers.ts/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.hooks.ts/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx
Cross-referenced treatment-plan/CLAUDE.md, AGENTS.md, .claude/rules/frontend/**, .claude/rules/testing/**, plus design-system Option/Checkbox v2 typings.
Critical (90-100)
1. Native HTML elements bypass the Oxygen design system rule (confidence 92)
File: NhrDocumentCategoryFilter.tsx:64-118
The component renders raw <div>, <input>, <label>, <fieldset>, <legend> and reaches into Oxygen's internal CSS classes (oxygen-input-field__label, oxygen-input-field__input, oxygen-input-field__inputWrapper, oxygen-input-field__iconWrapper, dl-new-dropdown) plus [&_label]:!py-... overrides on the design-system Checkbox. This violates .claude/rules/frontend/react/oxygen-design-system.md ("Prefer design system components over custom HTML elements") and is fragile: those classes are private styling hooks that may change between Oxygen releases without notice.
Suggested fix: Use the design-system MultiCombobox/Combobox or InputField+Popover primitives (the Oxygen team already ships a multi-select pattern). At minimum, do not reach into private oxygen-input-field__* / dl-new-dropdown class names — they are not part of Oxygen's public API.
2. pointerdown listener prevents users from selecting text inside the input (confidence 90)
File: NhrDocumentCategoryFilter.hooks.ts:17-21, NhrDocumentCategoryFilter.tsx:38
The hook listens to pointerdown on document and closes the popup whenever the target is outside containerRef. Because the listener fires on the capture-less, document-level pointerdown, any drag-to-select inside the search input that ends outside the container (a very common interaction) will close the dropdown mid-selection. More problematic: it also fires on synthetic events from focus management of nested portaled tooltips (the IconButton "Clear" tooltip from @doctolib/design-system/IconButton/v2 renders into a portal — a click on the tooltip body is outside containerRef and would close the popup). Since the trigger input is the same element as the search field, this is also why test cases like "click outside" pass but real users would experience surprising closures.
Suggested fix: Use mousedown and check event.composedPath() for the trigger; better, use the Oxygen Popover primitive which handles this correctly with portal-aware outside-click logic.
Important (80-89)
3. useEffect syncing ref runs without a dependency array (confidence 88)
File: NhrDocumentCategoryFilter.hooks.ts:9-12
useEffect(() => {
onCloseRef.current = onClose
})
The intent ("sync ref every render") is documented, but ESLint's react-hooks/exhaustive-deps (configured under @doctolib/upfront-dev) will flag this. The repository rule Never suppress with eslint-disable (user MEMORY.md) means this lint warning must be fixed. Use either useEffect(() => { onCloseRef.current = onClose }, [onClose]) (works the same, satisfies exhaustive-deps), or move the assignment outside of useEffect with useLayoutEffect and the dep — or just call onClose directly without the ref since the cleanup function in the second useEffect already removes listeners and re-binds them when isOpen changes.
Suggested fix: Add [onClose] to the dep array, or drop the ref indirection entirely and inline onClose into the listeners (deps: [containerRef, isOpen, onClose]).
4. Disabled checkboxes still call onToggle — test asserts the wrong thing (confidence 86)
File: NhrDocumentCategoryFilter.tsx:108-117, test at NhrDocumentCategoryFilter.test.tsx:289-300
The component wires onChange={() => onToggle(option.value)} unconditionally. The Oxygen Checkbox v2 isDisabled prop blocks the native input from firing onChange at the browser level, so the test "should not call onToggle when a disabled option is clicked" passes — but the component itself has no defensive guard. If the design-system implementation ever changes (e.g. fires onChange during programmatic toggle, or a future variant where disabled is purely visual), onToggle will be invoked for disabled options. Either:
- Assert defensively:
onChange={(checked) => { if (!option.disabled) onToggle(option.value) }}, or - Document the trust contract via a comment.
This is also relevant because Checkbox v2 onChange signature is (value: boolean) => void — the current code ignores the checked argument and always toggles, which is correct for the parent's "toggle" semantics but means the checkbox state is fully derived (good).
5. aria-haspopup='dialog' is incorrect for a non-modal listbox (confidence 85)
File: NhrDocumentCategoryFilter.tsx:73-77
role='combobox' with aria-haspopup='dialog' is not the conventional pairing for a multi-select with checkbox options. WAI-ARIA 1.2 expects aria-haspopup='listbox' (or 'tree'/'grid'/'menu') for combobox patterns. With a <fieldset> containing checkboxes the semantics should arguably be aria-haspopup='listbox' and the popup should use role='listbox' with role='option' items — the current <fieldset> + native checkbox pattern is unusual and screen readers (NVDA, VoiceOver) will announce "expanded" but won't navigate the options as combobox children. Also, aria-autocomplete='none' combined with the input being used as a search field is contradictory — it should be 'list'.
Suggested fix: Either drop the combobox role and use a plain button trigger + dialog popup, or commit to the combobox pattern fully (aria-autocomplete='list', role='listbox', aria-activedescendant, arrow-key navigation). The current half-state will fail accessibility audits.
6. Keyboard navigation inside the dropdown is missing (confidence 84)
File: NhrDocumentCategoryFilter.tsx (whole component)
There is no support for ArrowDown/ArrowUp to traverse options, no Home/End, and no roving focus. Users can Tab through the checkboxes (because they're native), but for a combobox-roled control this is non-conformant with WAI-ARIA Authoring Practices. The keyboard tests cover only Escape. This is a gap for keyboard-only and screen-reader users on a healthcare product.
Suggested fix: If staying with custom HTML, implement arrow-key navigation; if migrating to Oxygen's Combobox, this is handled for free.
7. ctx parameter is never used by the filter but is passed in tests with a hardcoded value (confidence 82)
File: createNhrDocumentCategoryFilterConfig.tsx:16 and tests createNhrDocumentCategoryFilterConfig.test.tsx:8,24,72,82,116
FilterConfig.render requires three args (filters, onChange, ctx) per types.ts:48-56. The factory only takes 2 in its render signature. TypeScript accepts this (extra params can be omitted
…(truncated, 3430 more chars)