[Bug]: Form with FileUploader in a TableExpandedRow causing large empty space below page

[pbp-at-ibm]

Package

carbon-components, carbon-components-react

Browser

Chrome

Package version

v10.46.0, v7.46.0

Description

When using a FileUploader inside a Form that is placed within a TableExpandedRow, the page has a large amount of empty space beneath the page content.

Here is an image demonstrating the empty space beneath our Carbon DataTable:

After investigating the issue, it seems to be a CSS problem with a class named bx--visually-hidden. After setting display: none, or changing position: absolute to position: relative, the large amount of space disappeared without any other obvious changes to the page visuals.

Here is an image demonstrating the bottom of our DataTable after making this change:

In our app, the empty space exists whether you expand any rows or not. In the CodeSandbox example provided, the empty space below the DataTable is not that large until you expand one of the top three rows, at which point you can see that you can scroll down and see the empty space.

CodeSandbox example

https://codesandbox.io/s/gifted-sara-00019?file=/src/index.js

Steps to reproduce

1. You are able to scroll to the bottom of the page, despite the content not taking up the full height of the window.
2. Expand any row (except the last), and scroll to the bottom of the page to see a large amount of empty space below.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate problems

[pbp-at-ibm]

Forgot to add that bx--visually-hidden has position set to absolute in carbon-components/scss/globals/scss/_css--helpers.scss.

[pbp-at-ibm]

Update on position: absolute: it does fix the extra space issue, but it causes the iconDescription to circle around the spinner when filenameStatus is set to uploading.

[sstrubberg]

Thank you for submitting this issue. We have triaged it and will be weighing it's priority against competing workstreams. Feel free to make a PR against this and we'll be happy to review it.