Hey @devoorhoede,
This behavior is not really a bug, but not really a feature either⦠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)