carbon-design-system / ibm-products

A Carbon-powered React component library for IBM Products
https://ibm-products.carbondesignsystem.com
Apache License 2.0
97 stars 138 forks source link

Additional scrollbar in tearsheet in some circumstances on Chrome only #4546

Closed sgrube closed 4 months ago

sgrube commented 7 months ago

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. image

What package(s) are you using?

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

  1. Step one
  2. Step two
  3. Step three
  4. 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