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)