[Bug]: Combobox style

[Fn4ch]

Library

React Components / v9 (@fluentui/react-components)

System Info

Combobox style: align-self: stretch;
Right version: align-self: center;

Are you reporting Accessibility issue?

yes

Reproduction

no message

Bug Description

Actual Behavior

align-self: stretch

Expected Behavior

align-self: center

Logs

No response

Requested priority

Blocking

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

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.

[ValentinaKozlova]

Hello @Fn4ch , could you please provide system info? What browser do you use?
I can't reproduce it. Tried on Chrome, Edge and Firefox.

[Fn4ch]

Hello @Fn4ch , could you please provide system info? What browser do you use? I can't reproduce it. Tried on Chrome, Edge and Firefox.

Im using Chrome 125.0.6422.78, and i got this problem everywhere
SpinButton example:

[ValentinaKozlova]

Hello @Fn4ch , could you please provide system info? What browser do you use? I can't reproduce it. Tried on Chrome, Edge and Firefox. ![image](https://private-user-images.githubusercontent.com/11574680/332428249-f3c60d66-ab5c-4c58-91d0-27afabe3b671.png?

Could you please send codesandbox or codepen example of how you use the component? Because it's not reproducible on our side

[Fn4ch]

Win 10 pro

deps:
react and etc
"@fluentui/react-components": "^9.53.0",
"@fluentui/react-icons": "^2.0.237",
"@storybook/react": "^8.0.9",
"@storybook/react-vite": "^8.0.9",

This component (Combobox) is shown through the storybook

My component:

import * as React from "react"
import { useState, useEffect } from "react"
import {
  Combobox,
  makeStyles,
  shorthands,
  useId,
  useComboboxFilter
} from "@fluentui/react-components"
import type { ComboboxProps } from "@fluentui/react-components"
import { MultipleComboboxProps } from "@/shared/models"

const useStyles = makeStyles({
  root: {
    display: "grid",
    gridTemplateRows: "repeat(1fr)",
    justifyItems: "start",
    ...shorthands.gap("2px"),
    maxWidth: "400px",
  },
})

const MultipleCombobox = (props: MultipleComboboxProps) => {
  const {
    options = [],
    placeholder = '',
    labelTitle = '',
    selectedValue = [],
    onSelectOptionsChange
  } = props

  const comboId = useId("combo-source")
  const selectedListId = `${comboId}-selection`
  const [value, setValue] = useState('')
  const styles = useStyles()

  const onSelect: ComboboxProps["onOptionSelect"] = (event, data) => {
    onSelectOptionsChange(data.selectedOptions)
    setValue("")
  }

  useEffect(() => {
    if(selectedValue.length === 0){
      setValue('')
    }
  }, [selectedValue])

  const children = useComboboxFilter(value, options, {
    noOptionsMessage: "Nothing was found for your request",
  })

  const onFocus = () => {
    setValue("")
  }

  const onBlur = () => {
    setValue(selectedValue.join(", "))
  }

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value)
  }

  useEffect(() => {
    const comboboxes = document.querySelectorAll('[role="combobox"]')
    comboboxes.forEach(c => c.classList.remove('f1ub7u0d'))
  }, [])

  return (
    <div className={styles.root}>
      <label id={comboId}
        style={{fontWeight: 600}}
      >{labelTitle}</label>
      <Combobox
        aria-labelledby={comboId}
        multiselect
        placeholder={placeholder}
        selectedOptions={selectedValue}
        value={value}
        onBlur={onBlur}
        onChange={onChange}
        onFocus={onFocus}
        onOptionSelect={onSelect}
        {...props}
      >
        {children}
      </Combobox>
    </div>
  )
}

export default MultipleCombobox

Im using useEffect, to delete style: allign-self: stretch