Customizing ComboBox popover placement

[HaveSpacesuit]

Feature

ComboBox currently has dropdownMenuProps, but they only apply to the div element around the dropdown options. Other elements such as the DropdownButton allow for dropdownMenuProps which control the underlying dropdown options.

Would like for there to be a way to control the dropdown options on a ComboBox, such as setting placement: 'bottom-end'.

Examples

This repo shows a dropdown which can flow right, but a combo box which must flow left
https://stackblitz.com/edit/github-c3rphd

[mayank99]

I would say this isn't something you should worry about. The default placement works fine 99.99% of the time because the text in the input remains aligned/close to the text in the options. Moving it to the other end could cause accessibility issues for users who use a screen magnifier.

Is there a reason other than aesthetic preference to do this?

[HaveSpacesuit]

We had a bug logged that this dropdown is flowing outside the dialog. Aligning it on the right could improve the appearance visually.

We can control the max width of the dropdown box, but that truncates the text and parts become unreadable.

However, looking at it this morning, I see one quick fix in our case would be to use the sublabel property for the descriptions which we are currently enclosing in parentheses. That would alleviate most of the extra width.

But no, other than aesthetic preference, no other reasons to do this. I agree that if this were to be aligned on the right, it could make a lot of the text further away from the input, esp. in the case with some long and some short values.

[mayank99]

Yes, sublabel should work better 👍