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.

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

Tabset is not resetting back, when first tab is removed. #872

Open
jav7zaid opened this issue Apr 25, 2021 · 3 comments
Open

Tabset is not resetting back, when first tab is removed. #872

jav7zaid opened this issue Apr 25, 2021 · 3 comments

Comments

@jav7zaid
Copy link

jav7zaid commented Apr 25, 2021

Describe the Bug

So, i was digging into Tabset for my project related work and observed that when you are on the first tab and try to remove it, the next available correct tab/panel doesn't gets selected.

So why is this happening?

As per my understanding, the observed attribute that triggers the onAttributeChange callback is the 'current-tab' property, and as we are on the first tab and trying to remove the same, there is no change in the old and new value, thats why the update doesn't happen.

Steps to Reproduce

Steps to reproduce the behavior:

  1. https://helixdesignsystem.github.io/helix-ui/components/tabset/
  2. Go to Dynamic Tabset Section
  3. Click on Remove First Button

Expected behavior

Should select the next available tab, similar to what is happening when you try to remove the last tab.

Screenshots

tabset

Environment

Please complete the following information:

  • Device: [e.g. Desktop, Laptop, iPhone6, etc.]
  • OS: [e.g. iOS]
  • Browser: [e.g. chrome, safari]
  • Version: [e.g. 22]

Additional Context

I can raise a PR as well, let me know.
How to fix this - docs/components/tabset/tabset-demo.js

Line no - 31 - check for currentTab value, when the updation occurs, seems to solve this issue.

// keep correct tab/panel pair open when a "tab" is added or when first tab is removed
if (this.autoUpdate || this.currentTab === 0) {
this.update();
}

This fix is just a workaround for demo and not a proper solution, but I am thinking of a proper use case here.
I know we could use update() function wherever we want to sync, but can this be handled as part of Tabset component ?

@100stacks
Copy link
Member

Hi @jav7zaid, thank you for submitting an issue and your feedback!

The Tabset component has been a little tricky since we cannot anticipate every use case for dynamic tab insertion and deletion.

You do bring up a good point here, and we'll consider it.

@100stacks
Copy link
Member

hi @jav7zaid, thank you for offering to push a PR to fix. Please do. 👍

@jav7zaid
Copy link
Author

hi @jav7zaid, thank you for offering to push a PR to fix. Please do. 👍

i have raised PR, have a look.

@100stacks 100stacks removed this from the HelixUI-v2.4.0-rc.0 milestone Jul 28, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants