Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
2 tasks done
wood-doug opened this issue Jun 17, 2024 · 12 comments
Open
2 tasks done

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

wood-doug opened this issue Jun 17, 2024 · 12 comments
Labels
component: tabs role: dev 🤖 severity: 2 https://ibm.biz/carbon-severity type: bug 🐛

Comments

@wood-doug
Copy link

wood-doug commented Jun 17, 2024 •
edited by tay1orjones
Loading

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
Copy link
Contributor

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.

@Gururajj77 Gururajj77 added the status: needs reproduction Issues lacking a code reproduction label Jun 20, 2024
@wood-doug
Copy link
Author

wood-doug commented Jun 20, 2024 via email

@preetibansalui
Copy link
Contributor

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
Copy link
Author

wood-doug commented Jun 24, 2024 via email

@sstrubberg
Copy link
Member

Hey @wood-doug. Thanks for drumming up this bug report for the Tabs component. Our engineers work tirelessly to expand on the design system while at the same time devoting time out of their sprint to squash bugs, like the one you've identified along the way. To that end, it will help expedite your request tremendously by creating a reproduction in sandbox like stackblitz. Thank you for your help!

@wood-doug
Copy link
Author

wood-doug commented Jul 11, 2024 via email

@tay1orjones
Copy link
Member

@wood-doug I believe when you reply via email to an issue it does not include the attachments you may have attached to the email. There is no .zip on this issue thread. We ask that you provide a live sandbox example so that we can quickly review and diagnose your issue.

@wood-doug
Copy link
Author

wood-doug commented Jul 15, 2024 via email

@tay1orjones
Copy link
Member

@wood-doug There is not a box link on this issue

@wood-doug
Copy link
Author

wood-doug commented Jul 17, 2024 via email

@tay1orjones
Copy link
Member

@wood-doug I quickly put together a stackblitz example of what you've described. I see the left arrow button not showing like it should. Is this what you're seeing?

@wood-doug
Copy link
Author

wood-doug commented Jul 18, 2024 via email

@tay1orjones tay1orjones added severity: 2 https://ibm.biz/carbon-severity and removed status: needs reproduction Issues lacking a code reproduction labels Sep 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
component: tabs role: dev 🤖 severity: 2 https://ibm.biz/carbon-severity type: bug 🐛
Projects
Design System
Status: ⏱ Backlog
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tay1orjones @sstrubberg @wood-doug @Gururajj77 @preetibansalui