search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.6k stars 1.76k forks source link

[Bug]: Tablist not scrolling properly after adding tabs #16801

Open wood-doug opened 2 weeks ago

wood-doug commented 2 weeks ago

Package

@carbon/react

Browser

Chrome, Safari, Firefox, Edge

Package version

1.58.1

React version

18

Description

When I start with a tablist that does not require scrolling and add tabs so scrolling is required, it does not scroll correctly. This is similar to issue 11783 in that the scrolling is not recalculating when it should

Reproduction/example

import React from "react"; import './App.css'; import { Button } from "@carbon/react"; import TabsSet from "./TabsSet" export default class App extends React.PureComponent { constructor( props ) { super( props ); this.tabs = [ { title: "Green Tab", panel: <div style={ { backgroundColor: "#D0F0D0" } }> Green Panel

, panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, { title: "Blue Tab", panel: <div style={ { backgroundColor: "#D0D0F0" } }> Blue Panel
, panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, { title: "Purple Tab", panel: <div style={ { backgroundColor: "#F0D0F0" } }> Purple Panel , panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, { title: "Red Tab", panel: <div style={ { backgroundColor: "#F0D0D0" } }> Red Panel , panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, { title: "Amber Tab", panel: <div style={ { backgroundColor: "#F0F0D0" } }> Amber Panel , panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, { title: "Gray Tab", panel: <div style={ { backgroundColor: "#D0D0D0" } }> Gray Panel , panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, { title: "White Tab", panel: <div style={ { backgroundColor: "#FFFFFF" } }> White Panel , panelClass: "sideTabPanel", tabClass: "sideTabLabel", }, ] this.state = { tabList: [ ], nextIndex: 0, }; } render() { const tabSetProps = { tabList: this.state.tabList, }; const addTabButton = { disabled: this.state.nextIndex >= this.tabs.length, kind: "secondary", size: "md", onClick: () => this.handleAddTab(), }; return
<TabsSet { ...tabSetProps } />
<Button { ...addTabButton } > Add Tab
} handleAddTab() { const tabs = [ ...this.state.tabList ]; let nextIndex = this.state.nextIndex; tabs.push( this.tabs[ nextIndex++ ] ); this.setState( { tabList: tabs, nextIndex: nextIndex, } ); } } import React from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import { Tabs, Tab, TabList, TabPanels, TabPanel } from "@carbon/react"; export default class TabsSet extends React.PureComponent { static propTypes = { className: PropTypes.string, contentClass: PropTypes.string, tabsClass: PropTypes.string, tabList: PropTypes.array, }; getClassName() { const { className } = this.props; const names = []; if( className && className !== "" ) names.push( className ); names.push( tabs_panel ); return classnames( names ); } renderTabs() { let key = 1; return this.props.tabList.map( ( item ) => { const tabProps = { className: item.tabClass, } if( item.icon ) tabProps.renderIcon = item.icon; return <Tab key={ key++ } { ...tabProps }> { item.title } } ); } renderPanels() { let key = 1; return this.props.tabList.map( ( item ) => { return <TabPanel key={ key++ } className={ item.panelClass } > { item.panel } } ); } render() { if( !this.props.tabList ) return; if( this.props.tabList.$$typeof === "Symbol(react.element)") { return this.props.tabList; } if( !Array.isArray( this.props.tabList ) ) { return this.props.tabList.panel; } const tabListProps = { fullWidth: true, scrollIntoView: true, } return <div className={ this.getClassName() }> <Tabs scrollIntoView="true" className={ this.props.tabsClass } > <TabList { ...tabListProps }> { this.renderTabs() } <TabPanels className={ this.props.contentClass }> { this.renderPanels() } } }

Steps to reproduce

Create a tab list with few enough tabs that they display properly, the through user interaction, add one or more tabs to exceed the tablist size

Suggested Severity

None

Application/PAL

No response

Code of Conduct

Gururajj77 commented 2 weeks ago

Hi @wood-doug, could you please reproduce your issue in a sandbox environment? We have a repository containing pre-configured sandboxes for different versions of @carbon/react. Please use the sandbox that matches the version you're experiencing the issue with. This will help us better understand and debug the problem you're facing. Let me know if you need any assistance with setting up the sandbox.

wood-doug commented 2 weeks ago

From: Gururaj J @.> Sent: Thursday, June 20, 2024 7:22 AM To: carbon-design-system/carbon @.> Cc: Doug Wood @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Bug]: Tablist not scrolling properly after adding tabs (Issue #16801)

Hi @wood-doug https://github.com/wood-doug , could you please reproduce your issue in a sandbox environment? We have a repository https://github.com/carbon-design-system/sandboxes/blob/main/README.md containing pre-configured sandboxes for different versions of @carbon/react. Please use the sandbox that matches the version you're experiencing the issue with. This will help us better understand and debug the problem you're facing. Let me know if you need any assistance with setting up the sandbox.

— Reply to this email directly, view it on GitHub https://github.com/carbon-design-system/carbon/issues/16801#issuecomment-2180432323 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AGVNOQP4SBARC5JDDX7FUPLZIK3LZAVCNFSM6AAAAABJOERUHSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBQGQZTEMZSGM . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AGVNOQMMWXGUHT4PCKCVZVTZIK3LZA5CNFSM6AAAAABJOERUHSWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUB63A4G.gif Message ID: @. @.> >

preetibansalui commented 1 week ago

From: Gururaj J @.> Sent: Thursday, June 20, 2024 7:22 AM To: carbon-design-system/carbon @.> Cc: Doug Wood @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Bug]: Tablist not scrolling properly after adding tabs (Issue #16801) Hi @wood-doug https://github.com/wood-doug , could you please reproduce your issue in a sandbox environment? We have a repository https://github.com/carbon-design-system/sandboxes/blob/main/README.md containing pre-configured sandboxes for different versions of @carbon/react. Please use the sandbox that matches the version you're experiencing the issue with. This will help us better understand and debug the problem you're facing. Let me know if you need any assistance with setting up the sandbox. — Reply to this email directly, view it on GitHub <#16801 (comment)> , or unsubscribe https://github.com/notifications/unsubscribe-auth/AGVNOQP4SBARC5JDDX7FUPLZIK3LZAVCNFSM6AAAAABJOERUHSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBQGQZTEMZSGM . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AGVNOQMMWXGUHT4PCKCVZVTZIK3LZA5CNFSM6AAAAABJOERUHSWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUB63A4G.gif Message ID: @. @.> >

Hey @wood-doug , As mentioned could you please reproduce your issue in a sandbox environment? We have a repository containing pre-configured sandboxes for different versions of @carbon/react. Please use the sandbox that matches the version you're experiencing the issue with. This will help us better understand and debug the problem you're facing. Let me know if you need any assistance with setting up the sandbox. Your comment looks like its missing that sandbox link.

wood-doug commented 1 week ago

I sent you a perfectly good zip with a small piece of code that demonstrates the issue.

From: Preeti Bansal @.> Sent: Monday, June 24, 2024 11:16 AM To: carbon-design-system/carbon @.> Cc: Doug Wood @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Bug]: Tablist not scrolling properly after adding tabs (Issue #16801)

From: Gururaj J @.> Sent: Thursday, June 20, 2024 7:22 AM To: carbon-design-system/carbon @.> Cc: Doug Wood @.>; Mention @.> Subject: Re: [carbon-design-system/carbon] [Bug]: Tablist not scrolling properly after adding tabs (Issue #16801 https://github.com/carbon-design-system/carbon/issues/16801 ) Hi @wood-doug https://github.com/wood-doug https://github.com/wood-doug , could you please reproduce your issue in a sandbox environment? We have a repository https://github.com/carbon-design-system/sandboxes/blob/main/README.md containing pre-configured sandboxes for different versions of @carbon/react. Please use the sandbox that matches the version you're experiencing the issue with. This will help us better understand and debug the problem you're facing. Let me know if you need any assistance with setting up the sandbox. — Reply to this email directly, view it on GitHub <#16801 (comment) https://github.com/carbon-design-system/carbon/issues/16801#issuecomment-2180432323 > , or unsubscribe https://github.com/notifications/unsubscribe-auth/AGVNOQP4SBARC5JDDX7FUPLZIK3LZAVCNFSM6AAAAABJOERUHSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBQGQZTEMZSGM . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AGVNOQMMWXGUHT4PCKCVZVTZIK3LZA5CNFSM6AAAAABJOERUHSWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUB63A4G.gif Message ID: @. @.> >

Hey @wood-doug https://github.com/wood-doug , As mentioned could you please reproduce your issue in a sandbox environment? We have a repository https://github.com/carbon-design-system/sandboxes/blob/main/README.md containing pre-configured sandboxes for different versions of @carbon/react. Please use the sandbox that matches the version you're experiencing the issue with. This will help us better understand and debug the problem you're facing. Let me know if you need any assistance with setting up the sandbox. Your comment looks like its missing that sandbox link.

— Reply to this email directly, view it on GitHub https://github.com/carbon-design-system/carbon/issues/16801#issuecomment-2186820695 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AGVNOQOZXEKQ5HE4USK5TO3ZJAZ3JAVCNFSM6AAAAABJOERUHSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBWHAZDANRZGU . You are receiving this because you were mentioned. https://github.com/notifications/beacon/AGVNOQP7NBDSGFQ3N2IQXU3ZJAZ3JA5CNFSM6AAAAABJOERUHSWGG33NNVSW45C7OR4XAZNMJFZXG5LFINXW23LFNZ2KUY3PNVWWK3TUL5UWJTUCLA6FO.gif Message ID: @. @.> >