FileUploader breaks Modal's UI when clicked

[bitfede]

What package(s) are you using?

• carbon-components
• [x ] carbon-components-react

Detailed description

Describe in detail the issue you're having.

I want to have a fileuploader inside a modal window. The problem is that when I click on fileuploader the modal's UI breaks by shifting to the top and disabling scrolling.

Is this issue related to a specific component?

Yes, Modal and FileUploader

What did you expect to happen? What happened instead? What would you like to
see changed?

I expected for the modal to keep the same layout, but when FileUploader is pressed it moves up the whole modal content suddenly.

What browser are you working in?

Chrome

Additional information

Screenshots:

before clicking on fileuploader:

after clicking on fileuploader (right after dismissing the window that lets me pick the files to upload):

What can it be? Any suggestion? Anyone ever had this problem?

Thanks for your time!!!

[edurocher]

We had something similar and other problems since Chrome updated to version 87. I suspect this has to do with the .bx--visually-hidden styles (it is used in the file uploader component). It looks like Chrome changed something in the implementation of positioned elements.
Absolutely no guarantee but can you try this? It solved related problems for me:

.bx--visually-hidden {
  left: -999px;
}

[bitfede]

Hey @edurocher thank you very much for your time! Unfortunately that CSS rule didn't fix the issue, but you gave me some good insight into what to try and what might be going on.

I'll keep troubleshooting in the meantime

[tw15egan]

Related #7340

[tw15egan]

Hey there @bitfede! Looks like this was resolved in the latest release 7.28.0/10.28.0 (via #7698)

Updated example: https://codesandbox.io/s/modest-buck-81lj0?file=/index.js

[bitfede]

Thanks for letting me know! Good Job guys! 💪💪💪💪💪💪💪