Select Input menu causes the iframe to grow

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)