The width of the suggestion menu of a SuggestBox is incorrect.

[NickGaens]

Describe the bug When using a SuggestBox, the width of its suggestion menu is calculated by Domino as such:

onAttached(mutationRecord -> { suggestionsMenu.style().setWidth(element().offsetWidth + "px"); });

The problem this is introduces is that the SuggestBox may be attached to the DOM, triggering this handler, but is not yet visible to the user (e.g. when being put in an inactive Step). This results in an offsetWidth of 0, causing the min-width of a dropdown (150px) to kick in.

To Reproduce Create a Stepper with at least two Steps and add a SuggestBox to the second one. When activating the second step, the suggestion menu of the SuggestBox is 150px wide instead of taking over the width of the parent SuggestBox.

I have implemented a workaround for my Stepper related issue as described above, by doing the following in the Step containing the SuggestBox:

onActivated(step -> suggestBox.getSuggestionsMenu().style().setWidth(suggestBox.element().getBoundingClientRect().width + "px"));

It's the same line SuggestBox does on its own.

[vegegoku]

Drodown menus have been redesigned, also we have a new option to fit the menu width to the target width.