Multi-reference editor 'Create new entry and link' dropdown won't work in an app about field-editors HOT 7 OPEN

@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.

from field-editors.

This fix makes the dropdown at least usable without a hack but it's not particularly nice of an experience. The popper dropdown is absolutely positioned using transform: translate(0px, iframeHeightpx), which still does not affect the document height calculations.

Before click:

After click - now you get scrollbars, but the menu is not visible without scrolling - to a non-technical user, that's not very obvious especially since the text does not indicate a menu is open via icon change, etc:

After scrolling down within the iframe, you can use the menu:

User-experience wise the hack we were using with the old menu was actually a lot better, as autoresizer worked with it.

For anyone looking for an updated hack that works with the new version, this does the trick when we negate the transform:

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

from field-editors.

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

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.

from field-editors.

Experiencing the same issue.

The above fix solves it for me.

from field-editors.

@kamsar @knupska @matt-koevort We're working on the fix for this issue. We're about to release a new version of field-editors with the latest Forma36 under the hook that should resolve the issue.

from field-editors.

"@contentful/forma-36-react-components": "^3.100.2",:

from field-editors.

Marking issue as stale since there was no activity for 30 days

from field-editors.