Skip to content

feat: count chip inside multi-select filter input (PIN-9840) - #86

Draft
Alepazz wants to merge 1 commit into
developfrom
feature/PIN-9840_multiselect-count-chip
Draft

feat: count chip inside multi-select filter input (PIN-9840)#86
Alepazz wants to merge 1 commit into
developfrom
feature/PIN-9840_multiselect-count-chip

Conversation

@Alepazz

@Alepazz Alepazz commented Apr 21, 2026

Copy link
Copy Markdown
Collaborator

🔗 Issue

PIN-9840[FND] - Componente AutoComplete

Note: this PR builds on top of PIN-7358 (filters redesign, branch feature/PIN-7358_filters-redesign). It should be reviewed and merged after PIN-7358 is finalized. See the Prerequisite section below.

📝 Description / Context

The current multi-select filter field (autocomplete-multiple) renders one removable Chip per selection both inside the input (making it grow vertically) and as a row of chips under the fields. This hurts accessibility and clashes with the new design direction.

This PR explores the feasibility of a redesign where multi-select fields stay compact, showing a single chip with the selection count inside the input itself (see mockup attached to the Jira ticket). After selecting options the user sees only the count + a close icon to clear all, not a wall of removable tags.

This PR is opened as draft to drive the discussion with the design team before finalizing pixel-level details.

🛠 List of changes

  • AutocompleteMultipleFilterField: renders a count Chip with a close icon when ≥1 option is selected; onDelete clears all selections; stopPropagation avoids opening the dropdown.
  • AutocompleteBaseFilterField: new internal endAdornmentExtra slot, prepended to MUI's default endAdornment when present. Excluded from the spread to <Autocomplete> so it never lands on the DOM.
  • ActiveFiltersChips: multi-select filters no longer render as removable chips in the summary row (their selection is already shown inside the input). Other filter types (single-value, freetext, datepicker, numeric) still render as chips.
  • Filters.test.tsx + snapshots updated to reflect the new rendering.

🧪 How to test

Link this branch into pdnd-interop-frontend (via pnpm link or file: protocol) — no consumer code change is required, the new behavior is the default for all autocomplete-multiple fields.

Suggested pages:

  • Consumer → E-service catalog → "Erogato da" filter
  • Provider → E-service list
  • Any other page using type: 'autocomplete-multiple' in useFilters

Checklist:

  • Select 1-N options: count chip appears and updates reactively
  • Click the × on the count chip: all selections cleared, URL params updated
  • The dropdown does NOT open when clicking the ×
  • Reload with selections already in URL: count chip reflects the correct count on mount
  • The summary chip row below no longer duplicates multi-select chips
  • Single-select filters (e.g. Notifiche → read/unread) remain unchanged
  • "Annulla filtri" button still clears multi-select too

⚠️ Open points to discuss before "Ready for review"

  • Rollout strategy: evaluate whether we should introduce an opt-in flag (variant: 'chips' | 'count-chip') to stagger the migration, or proceed with this breaking change as-is. Current implementation takes the second path for simplicity.
  • Design review: confirm chip color, size, spacing, close icon, focus/hover states with design against the Jira mockup. Implementation uses placeholder values (color="primary", size="small").
  • Consumer migration: list and QA every page in pdnd-interop-frontend (and any other commons consumer) declaring an autocomplete-multiple filter. No API change required, visual regression testing advisable.
  • Versioning: breaking visual change — agree on semver bump. Natural choice is a major release (1.x.x → 2.0.0); alternatively a minor with the opt-in flag mentioned above.
  • Accessibility: the Jira ticket mentions the current component is not fully accessible. Verify aria-label on the clear chip, keyboard navigation (Escape closes dropdown, Backspace does not remove selections), visible focus ring in the filled state, screen-reader announcement of the count.

📎 Prerequisite

This PR is a follow-up / evolution of PIN-7358 (branch feature/PIN-7358_filters-redesign). Merge order should be:

  1. PIN-7358 gets reviewed, the filter-applied issues already flagged there get addressed, then merged into develop.
  2. This branch gets rebased on top of the updated develop.
  3. Any interaction between hasSubmitButton (introduced by PIN-7358) and the count-chip UX introduced here is resolved during the rebase.

🖼️ Pictures

Screenshot 2026-04-21 alle 10 12 05 Screenshot 2026-04-21 alle 10 12 15 Screenshot 2026-04-21 alle 10 12 30

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant