Is anyone else struggling with "positioning" in a combobox in React v9?

[vincentjflorio]

I appreciate that this is a known and default behavior for it to move itself around because otherwise the items would get clipped off-screen, but if the client wants to force it to stay put, the more material concern for me is none of the props, either string or shorthand, seem to affect the behavior at all:

In the docs it makes mention of the existence of such a prop:
https://react.fluentui.dev/?path=/docs/components-combobox--default

But the old shorthands don't work:
https://react.fluentui.dev/?path=/docs/concepts-migration-from-v0-positioning--page
and none of these seem to apply to listboxes:
https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default

Would appreciate any clarification.

[Makoto Morimoto (khmakoto)]

Combobox does have a positioning prop for you to pass the props that you can see in https://react.fluentui.dev/?path=/docs/concepts-developer-positioning-components--default. Have you tried using that?

[vincentjflorio]

Thanks for responding Makoto Morimoto (@khmakoto)!

That links appears to be the same as the third link in my post.

I may have misspoken when I said they don't seem to apply to listboxes.

What I mean is, I tried adding them to a Combobox via that positioning prop you mention, and regardless of the values supplied, it still sticks with the default behavior of moving back into the viewport as the user scrolls.

It's almost as if it cannot "hear" what we are saying.

[Makoto Morimoto (khmakoto)]

vincentjflorio what is it that you are trying to achieve? To force it to stay in one position even if you don't have enough space?

[vincentjflorio]

Makoto Morimoto (@khmakoto) Yes; and believe me, I know it sounds weird, but it's what we were asked to do. I prefer it to be like you're doing, like react-menu, so someone can't scroll their choices (especially active ones) out of view where they can't interact with it anymore.

[Makoto Morimoto (khmakoto)]

vincentjflorio you need to use the pinned prop for this. You can see it working in the following stackblitz by commenting and uncommenting the pinned prop.

This is what it looks like directly as a GIF.

Not pinned:

Pinned:

Hopefully that helps!

[vincentjflorio]

It does, and led me to some other relevant discoveries! Thank you for your amazingly fast response! I can't imagine how hands your full are right no, so it's very generous.

[Makoto Morimoto (khmakoto)]

No problem! Glad I could help!

[mrmwink-wtwco]

Makoto Morimoto (@khmakoto) - I'm a bit late to the party on this but I'm having a similar issue and even with it pinned that causes a new problem that if you resize the screen as you show in the stackblitz, you can't actually scroll to see the items at the button of the list in order to select them, any ideas!?

[mrmwink-wtwco]

Ignore me, just found the following which fixes everything !!!

autoSize : true,