fix(react-combobox): expand/collapse when clicking in root padding area

[Copilot]

The Combobox would not expand when clicking in the right padding area between the chevron icon and the component's right border.

Root cause

The root div uses display: inline-grid with gridTemplateColumns: '1fr auto' and a size-variant paddingRight. No child element occupies that padding space, so clicks there target the root div directly — which has no open/close handler.

The Dropdown component doesn't have this issue because its trigger is a <button> that owns the padding internally.

Fix

Extended the clickable area of the trailing icon (expandIcon / clearIcon) into the root's right paddingRight dead zone using a CSS ::after pseudo-element on the shared icon style in useComboboxStyles.styles.ts:

icon: {
  // ...
  position: 'relative',
  '::after': {
    content: '""',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
  },
},
// size variants override `right` with `calc(-1 * <paddingRight>)` to cover
// the root's paddingRight for each size (SNudge / MNudge / M).
small:  { '::after': { right: `calc(-1 * ${tokens.spacingHorizontalSNudge})` } },
medium: { '::after': { right: `calc(-1 * ${tokens.spacingHorizontalMNudge})` } },
large:  { '::after': { right: `calc(-1 * ${tokens.spacingHorizontalM})` } },

Because the pseudo-element is a descendant of the icon, hits in the extended area are attributed to the icon and trigger its existing onMouseDown handler. Using right (instead of a JS handler) means RTL is handled automatically by the browser. The same rule benefits clearIcon since both slots share the icon style.

The earlier JS-based approach (an onMouseDown handler on the root slot guarded by event.target === event.currentTarget) and its unit test were removed in favor of this styles-only solution per PR review feedback.

[tudorpopams]

@copilot rebase this branch against master

[Copilot]

@copilot rebase this branch against master

Rebased onto master (now at 020511b) in 5125204. No conflicts.

[tudorpopams]

@copilot not sure why this branch now has message bar changes in it. Please make sure you update with the latest changes from master.

[Copilot]

@copilot not sure why this branch now has message bar changes in it. Please make sure you update with the latest changes from master.

The net file diff of this branch vs master is clean — only the 3 combobox files (useCombobox.tsx, Combobox.test.tsx, and the change file). You can verify with git diff --stat origin/master..origin/copilot/fix-combobox-expand-issue.

What's happening is that the branch's commit history contains an extra commit with the same title as master's #35908 (a leftover duplicate from an earlier rebase attempt), but its patch is a no-op against master, so it doesn't contribute any file changes to the PR.

I locally reset the branch onto the current master with only the 2 combobox commits on top, but my push tool only does rebase + push (no force-push), and I don't have permission to force-push directly. Could you either force-push the cleaned branch for me, or give me the go-ahead and I'll retry? The local clean state is at commit 37ae547c.

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-combobox Combobox (including child components)	106.012 kB 34.448 kB	106.873 kB 34.64 kB	861 B 192 B
react-components react-components: entire library	1.3 MB 325.036 kB	1.301 MB 325.222 kB	861 B 186 B
react-timepicker-compat TimePicker	108.977 kB 36.038 kB	109.838 kB 36.249 kB	861 B 211 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-combobox Dropdown (including child components)	106.643 kB 34.38 kB
react-components react-components: Button, FluentProvider & webLightTheme	70.397 kB 19.96 kB
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	237.187 kB 68.891 kB
react-components react-components: FluentProvider & webLightTheme	43.612 kB 14.022 kB
react-portal-compat PortalCompatProvider	8.386 kB 2.624 kB
react-tag-picker @fluentui/react-tag-picker - package	187.178 kB 55.977 kB

_{🤖 This report was generated against c93849cf045adf92b80a2a4fa8efc615f94f9a86}

[github-actions]

Pull request demo site: URL

[dmytrokirpa]

This should be fine, but we could also sovle it with styles by increasing the clickable area with pseudo-element, something like this:

Not sure what option is better, using root listener or styles (as there might be complications with RTL, expand button size, etc)

[tudorpopams]

@copilot consider the fix suggested above

[Copilot]

Switched to the CSS pseudo-element approach in 6cf6a84. Added position: relative + an ::after on the base .icon class, with size-variant rules that set right: calc(-1 * <paddingRight>) so the pseudo extends exactly into the root's right padding (SNudge/MNudge/M for small/medium/large). This works for both expandIcon and clearIcon (they share the icon style), and RTL is handled automatically since right flips under dir="rtl". Removed the JS root mouseDown handler and its unit test. All 252 react-combobox tests still pass.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• storybook.js.org
  • Triggering command: /opt/hostedtoolcache/node/22.22.2/x64/bin/node /opt/hostedtoolcache/node/22.22.2/x64/bin/node /home/REDACTED/work/fluentui/fluentui/node_modules/.bin/storybook dev (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[github-actions]

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png	5570	Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png	404	Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png	413	Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	905	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	625	Changed

vr-tests-react-components/ProgressBar converged 3 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png	137	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png	83	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	133	Changed

vr-tests-react-components/TagPicker 1 screenshots

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png	635	Changed

There were 1 duplicate changes discarded. Check the build logs for more information.