[Bug]: Rendering issue of Combobox Component in some specific width range. about fluentui

[qjkobe]

Hi @mainframev ,
Amazing! it works for me.
I tried overflowBoundaryPadding property before, but I didn't know this property only takes effect when setting autoSize true.
Anyway, I'll close this ticket. Thank you very much

[mainframev]

Hi @qjkobe 👋🏻

I think it's expected behavior. This is how flip works.
In order to ignore automatic flipping, try to use pinned prop, it disables automatic repositioning of the component, it will always be placed according to the values of align and position props, regardless of the size of the component, the reference element or the viewport.

 <Combobox
      positioning={{
         pinned: true,
         position: 'below',
      }}
      className={styles.root}
      onOptionSelect={onOptionSelect}
      aria-labelledby={comboId}
      placeholder="Select an animal"
      onChange={(ev) => setQuery(ev.target.value)}
      value={query}
    >
      {children}
   </Combobox>

[qjkobe]

Hi @mainframev ,
I get your point that it's behavior of "flip" to change the popover dropdown to the top of the control. However, the problem is that when the popover drop down is re-positioned to the top, why isn't the height of the popover calculated agian? That's the root cause of the hidden options.
If I change the position to pinned and turn it to bottom forever, some a11y issues may happen that there are 2 scroll bar:

[mainframev]

Hi @qjkobe 👋🏻

Thank you for quick response. Now got it, In order to prevent the content overflowing by viewport you can use autoSize prop in positioning (fits popping content within available space in viewport) 🙂

<Combobox
   positioning={{
   autoSize: true,
     overflowBoundaryPadding: {
       top: 10,
     },
   }}
   className={styles.root}
   onOptionSelect={onOptionSelect}
   aria-labelledby={comboId}
   placeholder="Select an animal"
   onChange={(ev) => setQuery(ev.target.value)}
   value={query}
>
    {children}
 </Combobox>
  );