Additional scrollbar in tearsheet in some circumstances on Chrome only

Chrome only (fine on FF) I have multiple tearsheets and in some circumstances I end up with an additional scrollbar when certain controls are on the page. Interacting with some controls sometimes causes the outer scrollbar to scroll making the panel appear as if its gone blank.

What package(s) are you using?

[x] Carbon for IBM Products (or Carbon for IBM Cloud & Cognitive)
[ ] Legacy/CDAI
[ ] Legacy/Security

Detailed description

Describe in detail the issue you're having. I have encountered conditions that cause an additional scrollbar on tearsheet content. Sometimes interacting with the controls causes this outer scrollbar to scroll causing the tearsheet to appear blank. I have 2 conditions, but only one where I was able to recreate a simple example, but maybe they will be related. Condition 1

Adding a FileUploaderDropContainer to an existing page causes the scroll bar. I have attached a sample below (sorry, not familiar with codesandbox.io). Condition 2 (Use the referenced samle, but replace the FileUploaderDropContainer with <Toggle size='sm' label='Toggle1' />

I have a page where just having a toggle in the middle of the content causes the issue and interacting with that toggle causes the scroll issue.

Is this issue related to a specific component? Tearsheet and possibly FileUploaderDropContainer

What did you expect to happen? What happened instead? What would you like to see changed? The second scrollbar should not be present.

What browser are you working in? Chrome (works fine on FF)

What version of the @carbon/ibm-products (or @carbon/ibm-cloud-cognitive) package are you using?
carbon10-test@0.1.0 /Users/sgrube/dev/CloudPakOpenContent/carbon10-test
├── @carbon/colors@10.37.2
├── @carbon/ibm-products@1.72.0
├── @carbon/icons-react@10.49.4
├── @carbon/import-once@10.7.0
├── @carbon/layout@10.37.3
├── @carbon/motion@10.29.2
├── @carbon/themes@10.55.3
├── @carbon/type@10.45.4
├── @testing-library/jest-dom@5.17.0
├── @testing-library/react@13.4.0
├── @testing-library/user-event@13.5.0
├── carbon-components-react@7.59.20
├── carbon-components@10.58.13
├── carbon-icons@7.0.7
├── node-sass@8.0.0
├── react-dom@17.0.2
├── react-scripts@5.0.1
├── react@17.0.2
└── web-vitals@2.1.4
What offering/product do you work on? Any pressing ship or release dates we should be aware of? IBM Foundational services. So far, I've worked around the issue so it mostly just aesthetics.

Steps to reproduce the issue

Step one
Step two
Step three

etc. See sample below


import { Button, FileUploaderDropContainer, TextInput, Toggle, Form, TextArea } from 'carbon-components-react';
import { Tearsheet } from '@carbon/ibm-products'

function App() { return (

one

two

three

} actions={[ { kind: 'secondary', label: 'Cancel' }, { kind: 'primary', label: 'Create' } ]} title='My Cool Tearsheet' description='This is a sample tearsheet' open={true} >

Connection Details

</div>
            <div>
              <Toggle size='sm' label='Toggle1' />
              <Toggle size='sm' label='Toggle2' />
              <Toggle size='sm' label='Toggle3' />
            </div>
          </section>
          <div style={{ height: '1px', margin: '32px 0 32px 0', "background-color": ' #E0E0E0'}} />
          <section>
            <h3>Token attribute mappings</h3>
            <div>These are the mappings</div>
            <div>
              <TextInput
                name='field2'
                id='oidc-id2'
                labelText='Sample field'
              />
              <TextInput
                  name='field3'
                  id='oidc-id3'
                  labelText='Sample field'
                />
              <TextInput
                  name='field4'
                  id='oidc-id4'
                  labelText='Sample field'
                />
              <TextInput
                  name='field5'
                  id='oidc-id5'
                  labelText='Sample field'
                />
              <TextInput
                  name='field6'
                  id='oidc-id6'
                  labelText='Sample field'
                />
            </div>
          </section>
          <div style={{ height: '1px', margin: '32px 0 32px 0', "background-color": ' #E0E0E0'}} />
          <section>
            <h3>To identity provider</h3>
            <div>Download some metadata</div>
            <div>
              <Button
                as="a"
                type="button"
                kind="ghost"
                size="small"
                href={'/common-nav/idprovider/v3/saml/metadata/defaultSP'}>
                Download Metadata
            </Button>
            </div>
          </section>
          <div style={{ height: '1px', margin: '32px 0 32px 0', "background-color": ' #E0E0E0'}} />
          <section>
            <h3>From identity provider</h3>
            <div>Upload some metadata</div>
            <div>
              <FileUploaderDropContainer
                accept={[
                  'text/plain',
                  'application/xml',
                  'text/xml'
                ]}
                labelText='Upload some stuff'
                tabIndex={0}
                multiple={false}
                name='idp_metadata'
              />
            </div>
          </section>
          </Form>
        </div>
<pre><code>  </Tearsheet>
  <Button>PressMe</Button>
</div></code></pre>
<p>);
}</p>
<p>export default App;</p>
<pre><code>

> Please create a reduced test case in CodeSandbox
>
> https://codesandbox.io/s/github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products/SidePanel

## Additional information

- Screenshots or code
- Notes
## Chrome
![image](https://github.com/carbon-design-system/ibm-products/assets/20325236/facab9f9-61b6-4d4d-a515-6c8b563795a8)

## Firefox
![image](https://github.com/carbon-design-system/ibm-products/assets/20325236/907bcdeb-a08c-4875-bc22-2fff8d391b72)</code></pre>            </div>
        </div>
    
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lee-chase"><img src="https://avatars.githubusercontent.com/u/15086604?v=4" />lee-chase</a>
                commented
                <strong> 7 months ago</strong>            </div>
            <div class="markdown-body">
                <p>This appears to be because the Carbon File selector hides content below the bottom of the page.</p>
<p><img src="https://github.com/carbon-design-system/ibm-products/assets/15086604/d33dde40-f867-4ebc-b320-21dbca8678ed" alt="image" /></p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lee-chase"><img src="https://avatars.githubusercontent.com/u/15086604?v=4" />lee-chase</a>
                commented
                <strong> 7 months ago</strong>            </div>
            <div class="markdown-body">
                <p>Issue and fix needs submitting to Carbon to set the hidden input and label inside the component or above/to left so as not to create scroll bar.</p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-actions[bot]"><img src="https://avatars.githubusercontent.com/in/15368?v=4" />github-actions[bot]</a>
                commented
                <strong> 6 months ago</strong>            </div>
            <div class="markdown-body">
                <p>This issue is stale because it has been open for 30 days with no activity.
Remove the stale label or add a comment, otherwise this issue will be closed in 14 days.</p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sgrube"><img src="https://avatars.githubusercontent.com/u/20325236?v=4" />sgrube</a>
                commented
                <strong> 6 months ago</strong>            </div>
            <div class="markdown-body">
                <p>keep alive</p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-actions[bot]"><img src="https://avatars.githubusercontent.com/in/15368?v=4" />github-actions[bot]</a>
                commented
                <strong> 4 months ago</strong>            </div>
            <div class="markdown-body">
                <p>This issue is stale because it has been open for 30 days with no activity.
Remove the stale label or add a comment, otherwise this issue will be closed in 14 days.</p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/github-actions[bot]"><img src="https://avatars.githubusercontent.com/in/15368?v=4" />github-actions[bot]</a>
                commented
                <strong> 4 months ago</strong>            </div>
            <div class="markdown-body">
                <p>This issue was closed because it has received no activity for 14 days.</p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sgrube"><img src="https://avatars.githubusercontent.com/u/20325236?v=4" />sgrube</a>
                commented
                <strong> 4 months ago</strong>            </div>
            <div class="markdown-body">
                <p>@sgrube keep alive</p>            </div>
        </div>
            <div class="comment">
            <div class="user">
                <a rel="noreferrer nofollow" target="_blank" href="https://github.com/sgrube"><img src="https://avatars.githubusercontent.com/u/20325236?v=4" />sgrube</a>
                commented
                <strong> 4 months ago</strong>            </div>
            <div class="markdown-body">
                <p>@lee-chase can this remain open until the issue is fixed?</p>            </div>
        </div>
    
    <div class="page-bar-simple">
            </div>

<div class="footer">
        <ul class="body">
            <li>© <script>
                    document.write(new Date().getFullYear())
                </script> Githubissues.</li>
            <li>Githubissues is a development platform for aggregating issues.</li>
        </ul>
    </div>

</html>

carbon-design-system / ibm-products