Multi-reference editor 'Create new entry and link' dropdown won't work in an app

To reproduce this:

1. Clone https://github.com/kamsar/ctfl-multi-reference-embed-bug (specific repro code location)
2. npm run start
3. In Contentful, add a private app pointed at http://localhost:1338, with a Entry field editor for Entry reference, list
4. Assign the app’s field editor to any Entry reference, list field. Ensure that more than one content type is allowed to be linked.
5. Edit an entry with the custom editor. It will render correctly and work as a duplicate of the default multiple reference editor until you click Create new entry and link. Then the dropdown for content type selection becomes hidden and can’t be clicked.

The same view, but with sdk.window.startAutoResizer() replaced with sdk.window.updateHeight(800) to force a very tall iframe:

There are two issues here (and they’re probably closely related):

1. The extension SDK’s autoResizer is not picking up the opening of the dropdown and resizing the iframe
2. This seems to be because the technique used to open the dropdown is also not updating any of the usual browser height detection properties, such as document.body.scrollHeight or document.documentElement.getBoundingClientRect() all of which remain constant within the iframe whether the dropdown is open or not.

[knupska]

@kamsar, I encountered this same issue. It is because the dropdown containers use fixed positioning. Subsequently the iframe height calculations do not take the dropdown dimensions into account.

It is related to #188 and also impacts the action menu dropdown, which leverages the same container and positioning. The bottom dropdown, (or otherwise long actions menus), will always get cut off by the iframe.

Specifically regarding the Create new entry and link action, I was able to produce a quick and dirty workaround by overriding the styles to force the container to be static positioned:

.DropdownContainer__DropdownContainer___3WlJM[data-test-id="add-entry-menu-container"] {
  position: static !important;
  display: inline-block !important;
  margin-top: 5px !important;
}

This results in:

Unfortunately it isn’t an applicable workaround for the actions menu dropdown on the individual entry cards.

[chrisfrancis27]

The way I worked around this on one of our apps was as follows. However, it’s only useful in certain situations (see caveats):

1. Create a ref on the absolute-positioned element which overflows the iframe (caveat: this is only possible if the component lets you pass a ref obviously, such as using a Forma 36 <DropdownList>)
2. Create an event handler for any event which causes the overflowing element to appear (caveat: again, this is only possible if you have control over when the element is displayed - for example, you can’t add a callback to get notified when the user opens the dropdown on an AssetCard as far as I know)
3. In the event handler above, grab the element reference (the ref added in point 1) and call getBoundingClientRect() on it - you now have the dimensions of the absolute-positioned element
4. From there it’s simply a case of turning off the window auto-resizer and calling updateHeight() with the bounding box height, plus any offsets / padding / whatever you need to make it fit
5. When the element is hidden again, make sure to restart the window auto-resizer

https://user-images.githubusercontent.com/273311/144236000-d9085360-4948-464c-8983-d77de861e22f.mov

The results still aren’t perfect - obviously the dropdown is causing the whole iframe to grow, rather than just appearing over the field below it, but there are limits to what HTML can do 😄 This was good enough for our use case - to be able to dynamically adjust the height of the iframe to encompass the (variable-length) dropdown items without clipping/scrolling.