[Bug]: Listbox width on Combox is not overridable with CSS var --fui-match-target-size precedence

[Cam-Bloom]

Component

Combobox

Package version

9.66.8

React version

18.3.1

Environment

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 3.85 GB / 31.70 GB
  Browsers:
    Edge: Chromium (138.0.3351.77)
    Internet Explorer: 11.0.19041.5794
  npmPackages:
    @ctrl/tinycolor: ^3.4.1 => 3.4.1
    @dnd-kit/core: ^6.1.0 => 6.1.0
    @dnd-kit/sortable: ^8.0.0 => 8.0.0
    @ebay/nice-modal-react: ^1.2.6 => 1.2.6
    @faker-js/faker: ^8.0.2 => 8.0.2
    @fluentui/react: ^8.91.1 => 8.110.2
    @fluentui/react-components: 9.66.7 => 9.66.7
    @fluentui/react-datepicker-compat: 0.4.50 => 0.4.50
    @fluentui/react-icons: ^2.0.232 => 2.0.256
    @fluentui/react-migration-v8-v9: ^9.2.16 => 9.2.16
    @fluentui/theme-samples: ^8.6.20 => 8.6.20
    @fullcalendar/core: ^6.1.11 => 6.1.11
    @fullcalendar/daygrid: ^6.1.11 => 6.1.11
    @fullcalendar/interaction: ^6.1.11 => 6.1.11
    @fullcalendar/react: ^6.1.11 => 6.1.11
    @lexical/react: 0.20.0 => 0.20.0
    @testing-library/dom: ^10.4.0 => 10.4.0
    @testing-library/jest-dom: ^6.4.2 => 6.4.2
    @testing-library/react: ^16.1.0 => 16.1.0
    @testing-library/user-event: ^14.4.3 => 14.4.3
    @types/cypress: ^1.1.3 => 1.1.3
    @types/fast-json-patch: ^1.1.5 => 1.1.5
    @types/http-proxy-middleware: ^1.0.0 => 1.0.0
    @types/i18next: ^13.0.0 => 13.0.0
    @types/leaflet: ^1.9.0 => 1.9.0
    @types/leaflet-draw: ^1.0.6 => 1.0.6
    @types/lodash: ^4.14.178 => 4.14.190
    @types/node: ^16.11.21 => 16.11.21
    @types/react: 18.3.1 => 18.3.1
    @types/react-dom: 18.3.1 => 18.3.1
    @types/react-i18next: ^8.1.0 => 8.1.0
    @types/react-json-tree: ^0.13.0 => 0.13.0
    @types/react-leaflet: ^2.8.2 => 2.8.2
    @types/react-window: ^1.8.8 => 1.8.8
    @visx/visx: ^3.3.0 => 3.3.0
    @vitejs/plugin-react: ^4.0.0 => 4.2.1
    @vitest/coverage-istanbul: ^1.6.0 => 1.6.0
    ag-grid-community: 29.3.5 => 29.3.5
    ag-grid-react: 29.3.5 => 29.3.5
    allotment: 1.20.2 => 1.20.2
    angular-expressions: 1.4.3 => 1.4.3
    beautifymarker: ^1.0.9 => 1.0.9
    caniuse-lite: ^1.0.30001597 => 1.0.30001722
    cypress: ^10.11.0 => 10.11.0
    decimal.js: ^10.4.3 => 10.4.3
    eslint-config-react-app: ^7.0.1 => 7.0.1
    eslint-plugin-simple-import-sort: ^10.0.0 => 10.0.0
    fast-json-patch: ^3.1.0 => 3.1.0
    gridstack: ^10.0.1 => 10.0.1
    http-proxy-middleware: ^2.0.4 => 2.0.4
    i18next: ^21.8.13 => 21.8.13
    identity-obj-proxy: ^3.0.0 => 3.0.0
    imis-shared: ^0.0.1 => 0.0.1
    jsdom: 24.0.0 => 24.0.0
    leaflet: 1.9.3 => 1.9.3
    leaflet-draw: ^1.0.4 => 1.0.4
    leaflet-draw-drag: ^0.4.8 => 0.4.8
    leaflet.beautifymarker: ^1.1.1 => 1.1.1
    lexical: 0.20.0 => 0.20.0
    lodash: ^4.17.21 => 4.17.21
    msw: ^2.2.1 => 2.2.1
    react: 18.3.1 => 18.3.1
    react-app-polyfill: 3.0.0 => 3.0.0
    react-dom: 18.3.1 => 18.3.1
    react-error-boundary: ^6.0.0 => 6.0.0
    react-i18next: ^11.18.1 => 11.18.1
    react-json-tree: ^0.17.0 => 0.17.0
    react-leaflet: ^4.2.0 => 4.2.0
    react-leaflet-draw: ^0.20.4 => 0.20.4
    react-rnd: 10.4.11 => 10.4.11
    react-router-dom: 6.28.0 => 6.28.0
    react-spring: ^9.7.3 => 9.7.3
    react-test-renderer: ^18.2.0 => 18.2.0
    react-transition-group: ^4.4.5 => 4.4.5
    react-virtualized-auto-sizer: 1.0.24 => 1.0.24
    react-window: ^1.8.10 => 1.8.10
    react-window-infinite-loader: ^1.0.9 => 1.0.9
    resize-observer-polyfill: 1.5.1 => 1.5.1
    socket.io-client: ^4.7.5 => 4.7.5
    typescript: ^4.7.4 => 4.7.4
    use-immer: ^0.6.0 => 0.6.0
    usehooks-ts: 3.1.1 => 3.1.1
    vite: 6.0.3 => 6.0.3
    vite-plugin-checker: 0.8.0 => 0.8.0
    vite-plugin-svgr: ^4.3.0 => 4.3.0
    vite-tsconfig-paths: ^4.2.0 => 4.2.0
    vitest: 2.1.6 => 2.1.6
    web-vitals: ^2.1.4 => 2.1.4

Current Behavior

So currently the only way to override the width of the listbox of a combo box is to apply a class with width the css !important rule, which is less than ideal. Otherwise the --fui-match-target-size always takes precedence

Expected Behavior

I would expect this overriding ability to behave in a similar way that it does on the TagPicker component, i understand they are different components but they are very similar. The JSX structure between 2 is different but would still expect if I pass a style whether it be via the style prop in JSX or via a object in a slot, it to behave the same

here is a reproduction of the tag picker with styled width
https://stackblitz.com/edit/opad7rqo?file=src%2Fexample.tsx,src%2FApp.tsx

here is the reproduction of the combobox itself
https://stackblitz.com/edit/ysn5fqst-zhpybkzd?file=src%2Fexample.tsx

As you can see the other properties like backgroundColor come through to the listbox itself but not the width.

Reproduction

https://stackblitz.com/edit/ysn5fqst-zhpybkzd?file=src%2Fexample.tsx

Steps to reproduce

Open stack blitz, inspect the style on the listbox prop of the combobox, also has applied className, change className to 'styles.listboxWithImportant' then it will override but with either the non important className or style still defaults to var(--fui-match-target-size)

Are you reporting an Accessibility issue?

None

Suggested severity

Medium - Has workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[layershifter]

You need to disable autoSize modifier for positioning if you would like to set width:

positioning={{ autoSize: 'height' }}

https://stackblitz.com/edit/ysn5fqst-fewmvgvc

TagPicker does not have autoSize enabled, that's why there is no collision. Closing, as it's by design behavior.