Dropdown options rendering outside of form creation tab

[LeonardYam]

Description

Dropdown options are not handled by overflow properties properly due to the FloatingPortal, leading to buggy behaviour in the form creation tab.

Related to #6026

To Reproduce
Steps to reproduce the behavior:

1. Create a form of suitable length with a dropdown field
2. Open the dropdown options
3. Scroll up past the dropdown options
4. See error

Expected behavior
Dropdown options should be hidden

Screenshots

floatingportal.mp4

[LeonardYam]

Hi @foochifa, I discovered another bug caused by the usage of FloatingPortal. I believe other than removing FloatingPortal, the only alternative to fix this would be to add overflow: hidden into the document body which should be avoided.

Let me know if I should open another PR or include the fix in #6501!

[foochifa]

Hmm @LeonardYam I can't seem to replicate this issue on both dev and production.

Did you face this on the develop branch? If possible could you show a screenshot with the chrome dev tools elements opened, and panned to the whitespace?

[LeonardYam]

Hi @foochifa, I have been able to replicate this on the updated develop branch. Just to be safe, I tested this on both Firefox and Chrome so I believe this is not a browser compatibility issue.

Firefox:

Chrome:

[foochifa]

Hmm.. may I check what's the floating-ui and downshift version currently in your environment? And also the device you are currently using?

As this is what we currently see:

Screen.Recording.2023-08-08.at.2.10.04.PM.mov

[LeonardYam]

Hi @foochifa, according to my node_modules, floating-ui is 0.9.3 and downshift is 7.3.2. This bug occurred on my M1 Mac and Windows 11 PC.

I'm not too sure why it's only showing up for me 🤕.