User-picker don't overflow the Forge iframe container in the issue creation screen

Forge Forge UI Kit and Custom UI
, , ,
1

Hello

I’m trying to use the User Custom Field in Forge (https://developer.atlassian.com/platform/forge/manifest-reference/modules/jira-custom-field/#data-types) but I’m having a problem with the ticket creation form.

I’m using the Atlaskit user-picker component, but the drop-down menu that’s supposed to display the users I provided to the component isn’t displayed.
In fact, it’s displayed. But it’s displayed INSIDE the iframe dedicated to rendering my component, and it doesn’t come out and the drop-down menu is hidden when I want it to overflow.
I’ve added a few <br/> tags before the user-picker component to see that the menu does appear in the iframe.

image

I’ve tried a few modifications concerning component overflow, but with no success. And I guess it won’t work because of the iframe.
In fact, I’d expect the user-picker to behave more like a Select List, enlarging its size to display the list of options. Maybe it’s just configuration, but I couldn’t figure it out.

Does anyone have any ideas ? Or just how to fix this ? I’m eager of any ideas

1 Like
2

Hello.

Given the lack of response, I imagine there aren’t many people facing the problem.
I found this ticket on the Ecosystem board, which seems to be related to the problem:
https://ecosystem.atlassian.net/browse/FRGE-1121

I’ve set up a workaround by adding an empty component just before my user-picker, and on certain user-picker events (onOpen, onInputChange) I modify the size of the 1st empty component.
For the moment it’s working pretty well, but I wouldn’t be surprised if this trick has its limits (tested with a handful of users).

3

Here’s my solution to the problem @JonathanPatient. Let me know if it helps.

1 Like