Dropdown width to fit its longest option width

[artxach]

Bug Report

• Package version(s): (1.14.3)
• Browser and OS versions: (Firefox 54.0.1 , Windows 2012 Server)

Describe the issue:

When a dropdown has many options with different lengths its width is being changed when selecting some option. Also when the options' list is opened it has a current option's width, so if the shortest option is selected and you open options' list it can word-break longer options

Actual behavior:

Expected behavior:

Let the dropdown by default or by specifying a prop to fit its longest option.

[buckingj]

Would love to see this fixed.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!

[manasark]

Any update on this bug? We are using the dropdown component in many UI pages. Fixing this issue would improve the readability for the user.

Package version(s): (5.64)
Browser: All browsers
OS versions: Windows 10

[lynamemi]

@artxach @manasark We investigated this bug and need more information to repro. Is it the width of the dropdown input field or the dropdown callout that you want to snap to the longest option? We are not seeing either width change based on which option is selected. The callout always snaps to the width of the input unless the 'dropdownWidth' prop is set. For really long options, the value can be read on hover.

I created this codepen for testing:
https://codepen.io/lynamemi/pen/wjapep

[manasark]

@lynamemi We want the dropdown width to fit the longest option in the dropdown input filed.

[manasark]

@lynamemi Any update on the above request?

[lynamemi]

@manasark Still not completely clear on the expected behavior here. Is it:

1. Dropdown's callout width
   OR
2. Dropdown's input field / container width

that you want to snap to the longest option's width?

[manasark]

@lynamemi option 2

[lynamemi]

Ok sounds good. That one will probably take a little more time than the other. I can try to get to it in the next couple of weeks.

[buckingj]

For what it's worth, don't we want both 1 and 2?

If I have a dropdown with "foo", "bar", and "baseball" in it, and I select "foo" and then show the dropdown, the dropdown will only truncate that last entry to "bas...".

I suppose if we fix #2, that will also implicitly fix #1, right? Assuming that's the case, that would be ideal. Truncating strings looks terrible in a dropdown, and seeing the dropdown constantly change width depending on what is selected is also a bad experience.

[lynamemi]

@buckingj @manasark - It would be great if one of you submitted a PR for this change - I'm going to unassign myself. It sounds like there are a few different directions we could take that would help you out and a PR would be a great place to continue this conversation. I'm happy to help review.

[stale]

This issue has been automatically marked as stale because it has not activity for 60 days. It will be closed if no further activity occurs within 14 days of this comment. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[stale]

This issue has been automatically closed because it has not had recent activity after being marked as stale. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to Fabric React!
Why am I receiving this notification?