Session: you-are-a-senior-harmonic-dolphin-subagent-ad8a57fc — 2026-04-27

Project: workspace-doctolib · Branch: HEAD · Mode: ` · **Model:**claude-sonnet-4-6`

Stats: 1 user messages, 28 tool calls, tools used: Read, Bash.

Conversation

Turn 1 — User

Review the following recently modified files for compliance with Doctolib's UpFront frontend architecture patterns.

Files to review: 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.test.tsx 3. /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx (unchanged, but related)

Context: This is a multi-select combobox filter component. The trigger is <input type="text" role="combobox"> (not a design system InputText — intentional, as InputText has no right-element slot). Uses oxygen-input-field__* CSS classes directly (same classes used by InputText internally). Uses dl-new-dropdown on the dropdown fieldset (same class used by Select/BetaComboBox). Clear button uses IconButton from @doctolib/design-system/IconButton/v2.

Check for: - Component directory structure (index.ts re-exporter, file naming conventions) - Named vs default exports - Separation of concerns: is the component correctly presentational? Does it hold any business logic it shouldn't? - Use of design system components vs raw HTML — where the deviations are intentional vs accidental - Tailwind arbitrary variant usage [&_label]:!py-[1.2rem] — is this pattern acceptable in UpFront, or should it use a CSS module? - The oxygen-input-field__* CSS classes used directly — acceptable or should go through a design system component? - Any anti-patterns in the React component structure

Turn 1 — Assistant

I'll read all three files plus the component directory structure to perform a thorough review.

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 { useEffect, useId, useRef, useState } from 'react' 6
7 type NhrDocumentCategoryFilterProps = { 8 label: string 9 values: string[] 10 options: Option[] 11 placeholder?: string 12 onToggle …(truncated, 4401 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 { 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 const renderComponent = (props: Partial<React.ComponentProps<t …(truncated, 7296 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)

Now let me check the directory structure for the component to verify index.ts, file naming, and sibling files.

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/

Tool results:

→ result (ok): index.ts NhrDocumentCategoryFilter.stories.tsx NhrDocumentCategoryFilter.test.tsx NhrDocumentCategoryFilter.tsx

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/

Tool results:

→ result (ok): NhrDocumentCategoryCell NhrDocumentCategoryFilter NhrDocumentList.stories.tsx NhrDocumentList.test.tsx NhrDocumentList.tsx NhrDocumentNameCell NhrDocumentStatusFilter NhrProcedureDateCell NhrShareDateCell NhrSharedByCell NhrStatusCell NhrVisibilityCell

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/

Tool results:

→ result (ok): createNhrDateSelectionFilterConfig.test.tsx createNhrDateSelectionFilterConfig.tsx createNhrDocumentCategoryFilterConfig.test.tsx createNhrDocumentCategoryFilterConfig.tsx createNhrDocumentStatusFilterConfig.test.tsx createNhrDocumentStatusFilterConfig.tsx createNhrDocumentVisibilityFilterConfig.test.tsx createNhrDocumentVisibilityFilterConfig.tsx

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: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/

Tool results:

→ result (ok): NhrDocumentStatusFilter.stories.tsx NhrDocumentStatusFilter.test.tsx NhrDocumentStatusFilter.tsx

Tools used:

• Bash: ls /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/

Tool results:

→ result (ok): NhrDocumentStatusFilter.stories.tsx NhrDocumentStatusFilter.test.tsx NhrDocumentStatusFilter.tsx

Tools used:

• Read: /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/NhrDocumentStatusFilter.tsx (1–30)

Tool results:

→ result (ok): 1 import { Checkbox } from '@doctolib/design-system/Checkbox/v2' 2 import { Heading } from '@doctolib/design-system/Heading' 3
4 import type { NhrDocumentStatusFilterProps } from '../../../types' 5
6 export const NhrDocumentStatusFilter = ({ label, statuses, value, onChange }: NhrDocumentStatusFilterProps) => ( 7 <> 8 <Heading level='h5'>{label}</Heading> 9 <div className='flex flex-col'> 10 {statuses.map((status) => ( 11 <Checkbox 12 key={status.filterKey} 13 …(truncated, 327 more chars)

Tools used:

• Bash: grep -r "NhrDocumentCategoryFilter" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/index.ts 2>/dev/null || echo "not in index.ts"

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/index.ts:export { createNhrDocumentCategoryFilterConfig } from './business/factories/filters/createNhrDocumentCategoryFilterConfig'

Tools used:

• Bash: grep -rn "oxygen-input-field\|dl-new-dropdown" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v ".test."

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:84: <label htmlFor={triggerId} className='oxygen-input-field__label mb-1 block'> /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:87: <div className='oxygen-input-field__inputWrapper'> /Users/U …(truncated, 941 more chars)

Tools used:

• Bash: grep -rn "\[&_label\]\|arbitrary.*variant\|\[&>" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v ".test." | grep -v ".stories."

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:122: className='dl-new-dropdown flex flex-col border-0 p-0 [&_label]:!py-[1.2rem] [&_label]:!px-[1.6rem] [&_label>span:last-child]:![font-size:1.4rem]'

Tools used:

• Bash: grep -rn "\[&" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v ".test." | grep -v ".stories." | grep -v "NhrDocumentCategoryFilter …(truncated, 1 more chars)

Tool results:

→ result (ok): (Bash completed with no output)

Tools used:

• Bash: grep -rn "useEffect\|useState\|useRef\|useId" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/ 2>/dev/null | grep -v ".test." | grep -v ".stor …(truncated, 43 more chars)

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentList.tsx:4:import { useMemo, useState } from 'react' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentList.tsx:39: const [currentPage, setCurrentPage] = useState(1) /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumen …(truncated, 2406 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 { 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', label: 'Report …(truncated, 3910 more chars)

Tools used:

• Bash: grep -n "getByPlaceholderText\|queryByPlaceholderText" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilt …(truncated, 37 more chars)

Tool results:

→ result (ok): 35: expect(screen.getByPlaceholderText('Ex. Laboratory report')).toBeInTheDocument()

Tools used:

• Bash: grep -rn "getByPlaceholderText\|queryByPlaceholderText" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/ 2>/dev/null | grep -v ".stories."

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx:79: expect(screen.getByPlaceholderText('Ex. Laboratory report')).toBeInTheDocument() /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx:35: expect(screen.getByPlaceholderText('Ex. Laboratory report')).to …(truncated, 17 more chars)

Tools used:

• Bash: grep -rn "style=" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/ 2>/dev/null | grep -v ".test." | grep -v ".stories."

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx:123: style={{ position: 'absolute', top: '100%', left: 0, width: '100%', marginTop: '0.4rem' }}

Tools used:

• Bash: grep -rn "import.*#" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/ 2>/dev/null

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentList.tsx:1:import { getPagedData } from '#utils/nhrPaginationHelpers' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrProcedureDateCell/NhrProcedureDateCell.tsx:1:import { formatNhrDate } from '#utils/nhrDateHelpers' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records- …(truncated, 127 more chars)

Tools used:

• Bash: grep -n "import" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx

Tools used:

• Bash: grep -n "import" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx

Tool results:

→ result (ok): 1:import type { Option } from '@doctolib/design-system/Option' 3:import { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter' 4:import type { FilterConfig } from '../../../types'

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 { useEffect, useId, useRef, useState } from 'react'

Tools used:

• Bash: cat /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | grep -A 20 '"aliases"\|"#"'

Tool results:

→ result (ok): (Bash completed with no output)

Tools used:

• Bash: grep -n "\"#\|paths\|aliases" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/tsconfig.json 2>/dev/null || echo "tsconfig not found"

Tool results:

→ result (ok): tsconfig not found

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui -name "tsconfig*.json" -o -name "vite.config.*" 2>/dev/null | head -10

Tool results:

→ result (ok): /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/tsconfig.build.json /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/tsconfig.json /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/vite.config.ts /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/node_modules/.federation/tsconfig.49b96c6b01b2bca969b9810e5b24def3.json /Users/USER/workspace/doctolib/trea …(truncated, 912 more chars)

Tools used:

• Bash: find /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui -name "package.json" -maxdepth 1 | xargs grep -A 5 '"imports"\|"#utils"' 2>/dev/null

Tool results:

→ result (ok): "imports": { "#i18n": "./src/i18n.ts", "#data/": "./src/data/.ts", "#utils/": "./src/utils/.ts" }, "exports": {

Tools used:

• Bash: grep -n "imports" /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | head -5

Tool results:

→ result (ok): 56: "imports": {

Tools used:

• Bash: grep -A 30 '"imports"' /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/package.json | head -30

Tool results:

→ result (ok): "imports": { "#i18n": "./src/i18n.ts", "#data/": "./src/data/.ts", "#utils/": "./src/utils/.ts" }, "exports": { ".": { "development": "./src/index.ts", "import": "./dist/index.js", "types": "./dist/index.d.ts", "default": "./dist/index.js" }, "./package.json": "./package.json" }, "deliciousImportSort": { "customGroups": "@doctolib", "mainOrder": [ "absolute", "relative", "bare" ] }, "importSort": {

…(truncated, 142 more chars)

Now I have a complete picture of all the relevant files and patterns. Here is the structured review.

Architecture Review: NhrDocumentCategoryFilter

Critical Issues (must fix)

1. NhrDocumentStatusFilter directory is missing its index.ts re-exporter — and this establishes the local pattern inconsistency

The component directory at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentStatusFilter/ has no index.ts. NhrDocumentCategoryFilter correctly has one. The factory at /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.tsx imports via:

import { NhrDocumentCategoryFilter } from '../../../components/NhrDocumentList/NhrDocumentCategoryFilter'

This import resolves to the index.ts, which is correct. However, the 3-level ../../../ traversal from src/business/factories/filters/ to src/components/… qualifies for a path alias under the package's own convention. The package defines #utils/* and #data/* in package.json "imports" but does not define #components/*. This means there is no alias available to clean up this import. This is an omission in the alias configuration, not a violation the component author can fix unilaterally — but it is worth flagging for the package owner to add "#components/*": "./src/components/*.ts" (or .tsx).

2. Tailwind arbitrary variant selector [&_label]:!py-[1.2rem] on a design system component is a fragile coupling

/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.tsx, line 122:

className='dl-new-dropdown flex flex-col border-0 p-0 [&_label]:!py-[1.2rem] [&_label]:!px-[1.6rem] [&_label>span:last-child]:![font-size:1.4rem]'

Three !important overrides targeting the internal <label> and <span> DOM structure of @doctolib/design-system/Checkbox/v2 via descendant selectors. This is a violation regardless of whether Tailwind arbitrary variants are used elsewhere in the codebase (they are not — this is the only occurrence in the package). The problems are:

• !important overrides on design system internals create an invisible dependency on the DS component's private DOM structure. If Checkbox/v2 changes its label markup, this silently breaks.
• The [font-size:1.4rem] override uses a raw CSS property string inside Tailwind, bypassing the design token system entirely. Font sizes should come from a DS prop or a token, not a hardcoded rem value.
• Arbitrary variant descendant selectors belong in a CSS Module, not inline in JSX, specifically because they encode structural knowledge about a child component that should be opaque.

Required fix: Move these overrides to a NhrDocumentCategoryFilter.module.scss file. Document in a comment why the DS Checkbox size needs to be overridden here, and open a ticket to request a size or density prop in the DS component instead of owning the override long-term.

3. Inline style prop for absolutely-positioned dropdown

Line 123:

style={{ position: 'absolute', top: '100%', left: 0, width: '100%', marginTop: '0.4rem' }}

All other layout in this component uses Tailwind classes. The position: absolute and related values are fully expressible as Tailwind utilities (absolute top-full left-0 w-full mt-[0.4rem]). The inline style prop here is inconsistent with the rest of the component and with the package's hybrid approach (Tailwind + CSS Modules). There is no justification for bypassing Tailwind here.

Required fix:

className='dl-new-dropdown absolute top-full left-0 w-full mt-[0.4rem] flex flex-col border-0 p-0'

(The [&_label] overrides should be moved to a CSS Module as noted above.)

Warnings (should fix)

4. oxygen-input-field__* CSS classes used directly without documentation

Lines 84, 87, 95, 102: The component uses oxygen-input-field__label, oxygen-input-field__inputWrapper, oxygen-input-field__input, and oxygen-input-field__iconWrapper directly. The context note acknowledges this is intentional because InputText has no right-element slot. This is an acceptable deviation when the DS component genuinely cannot accommodate the requirement — but the deviation must be documented at the point of use so future maintainers know it was a deliberate decision and not accidental.

Required fix: Add a comment block before the JSX explaining the constraint:

{/*
  Uses oxygen-input-field__* BEM classes directly because @doctolib/design-system/InputText
  does not expose a right-element slot that accepts multiple icons. These classes are the same
  ones used internally by InputText. If InputText gains a right-slot API, migrate here.
*/}

5. NhrDocumentCategoryFilter does not follow the Container/Presentational split despite holding non-trivial UX state

The component owns four pieces of state (isOpen, searchQuery, two useEffect handlers for keyboard and pointer-down) plus three derived values (firstLabel, displayLabel, filteredOptions). Under the UpFront component patterns rule, when a component has "complex state" it should be split into a public component and a *UI.tsx presentational variant. The rule is "Container/Presentational split when component has data access or complex state."

This component has no data access, but the UX state (open/close, search filtering, outside-click detection, escape-key handling) is more than trivial. The split would be:

• NhrDocumentCategoryFilter.tsx — manages isOpen, searchQuery, derives displayLabel and filteredOptions, forwards everything as props
• NhrDocumentCategoryFilterUI.tsx — pure presentational, receives all computed values as props

The index.ts re-exports only NhrDocumentCategoryFilter, which is correct.

This is a "should fix" rather than critical because the component is self-contained with no data access, the state is tightly coupled to rendering, and the team may have a local convention of keeping UX state in presentational components. However, the UX hooks (handlePointerDown, handleKeyDown) are reasonable candidates for extraction into a NhrDocumentCategoryFilter.hooks.ts file, which is explicitly called out in the component patterns rule.

Recommended fix: Extract the useEffect logic into NhrDocumentCategoryFilter.hooks.ts as a useNhrDocumentCategoryFilterInteractions hook. The component file itself then stays focused on rendering.

6. getByPlaceholderText used as an assertion query in both test files

/Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/components/NhrDocumentList/NhrDocumentCategoryFilter/NhrDocumentCategoryFilter.test.tsx, line 35, and /Users/USER/workspace/doctolib/treatment-plan/packages/tpf-national-health-records-ui/src/business/factories/filters/createNhrDocumentCategoryFilterConfig.test.tsx, line 79:

expect(screen.getByPlaceholderText('Ex. Laboratory report')).toBeInTheDocument()

The project testing rules explicitly state: "getByPlaceholderText — Placeholders are NOT accessible labels" and prohibit it for selection. The test at line 35 is an assertion (.toBeInTheDocument()), not a selection for interaction, but the stated intent of this test is "should show placeholder when no values are selected." The correct way to assert that the input renders with a given placeholder is toHaveAttribute('placeholder', '...') on the element found by role:

expect(screen.getByRole('combobox', { name: 'Category' })).toHaveAttribute('placeholder', 'Ex. Laboratory report')

This applies to both occurrences.

Suggestions (consider improving)

**7. handleClear closes the dropdown but onClear is a prop callbac …(truncated, 3606 more chars)