Dropdown Component: Hidden menu div can exceed with dimensions of the plugin window causing scrollbars to appear unintentionally

[aashreys]

I'm placing two Dropdown components side-by-side in a div flexbox and the hidden menu component on the rightmost dropdown is exceeding the bounds of the window causing a horizontal scrollbar, as shown in the picture below.

If I reduce the width of the hidden menu through developer tools, the scrollbar disappears once the menu fits the plugin window dimensions.

[aashreys]

Curious how I can set up a local development version of Create Figma Plugin and test changes to fix this? If I make progress, happy to contribute directly with a PR.

[yuanqing]

There’s a script to symlink to the local copy of Create Figma Plugin from your plugin. Instructions are in the README: https://github.com/yuanqing/create-figma-plugin/blob/8b63d7bb9a12351d4d3a43ab7b9085e62f7e9f43/README.md#contributing

[aashreys]

Upon further investigation, I've found that the same issue causes a vertical scrollbar to appear if a dropdown is the last element in a vertical UI stack.

[yuanqing]

@aashreys – The fix for this bug is currently on the next branch, and will be included in the next release. (In the meantime, if you can help to test the changes locally in your plugin, that would be awesome!)

[aashreys]

Tested locally. Still seeing the scrollbars and now a new bug where the dropdown menu jumps around as I move the cursor over it. Attached a video.

Prototyper.Dropdown.Test.-.minified.mp4

Thanks for looking into this!

[yuanqing]

Oof this is a weird one. (In the Storybook, the UI works OK while in dev tools and in “Responsive” mode.) Just pushed a fix!

[aashreys]

Oof this is a weird one. (In the Storybook, the UI works OK while in dev tools and in “Responsive” mode.) Just pushed a fix!

Yep this fixed it. Dropdowns work as expected and scrollbars do not appear.

[yuanqing]

Fixed in 1.9.1