Select Input menu causes the iframe to grow

šŸ†˜ Support
1

Iā€™m using a select input in my plugin. When opening the menu and itā€™s filled with a lot of items it causes the iframe to grow probably as large as all the items in the menu while the menu size is maxed on 300px. When you scroll down (in the menu) the space decreases until you reach the last item.

Iā€™ve tried using the SelectField, the UIā€™s SelectInput and an external select package. All have this issue.

Is this a bug or am I doing something wrong?

Here is a link to the repo: https://github.com/voorhoede/datocms-plugin-foreign-data-selector

2

Hey @devoorhoede,

This behavior is not really a bug, but not really a feature eitherā€¦ :sweat_smile: It is just an unfortunate quirk of how the plugin SDK works. It has to encapsulate the plugin in an iframe for security, but because the iframe is its own separate DOM, the SDK is always trying to ā€œguessā€ how tall it should be. It works fine for simpler use cases, but strange things can happen depending on how your select field works, i.e. whether itā€™s a virtualized list or actually a huge long element in the iframe DOM. Youā€™re not doing anything wrong, itā€™s just something that requires some manual effort to work around =/

Thankfully, the plugin SDK exposes some sizing utilities like ctx.stopAutoResizer() and ctx.setHeight() so you can manually control iframe sizing as needed in situations like this. Basically, on dropdown open, youā€™d stop the autosizer and manually set a sane pixel height (somewhere around 300-500, probably). Then youā€™d reverse that once the dropdown is closed and let the autosizer take over again.

This previous thread may be helpful: Control Canvas Height

Or, for a working example, you can see this plugin: Zoned DateTime Picker - Plugins ā€” DatoCMS , which has a loooooong list of time zones. It had the same issue, and I had to manually handle resizing whenever the dropdown is engaged: https://github.com/arcataroger/datocms-plugin-zoned-datetime-picker/blob/main/src/components/ZonedDateTimePicker.tsx#L226-L251

Does that help at all? Let me know if you need more specific guidance and I can try to PR it in your specific plugin? (Itā€™d have to be early-mid next week though)

3

Hi @roger ,

Thanks for your suggestions! Iā€™ll look into it.

Sorry for the late response.