design-system-react icon indicating copy to clipboard operation
design-system-react copied to clipboard

Tabs Component does not update selectedIndex if previously selected-Tab is removed from children

Open i039666 opened this issue 3 years ago • 3 comments

Hi,

I have a Tabs component with 2 tabs. Here we dynamically show and hide tabs.

  1. User selects the 2nd tab => selectedIndex = 1
  2. Because of certain user action, We hide the 2nd selected tab. total tabs-count = 1
  3. Issue:- After this action 1st tab is not automatically selected
  4. Root Cause:- selectedIndex is still 1, which is out of boundary as tabs-count =1 .

Ideally end user expects the current available tab should be selected.

`getSelectedIndex() { if( Number.isInteger(this.props.selectedIndex)) return this.props.selectedIndex;

        // Suggested fix, reset to 0 or update to defaultSelectionIndex
         return this.state.selectionIndex> this.getTabsCount() - 1 ? 0: this.state.selectionIndex;

` Thanks, Praveen

i039666 avatar Mar 23 '21 01:03 i039666

Thanks for opening your first issue! :wave: If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

welcome[bot] avatar Mar 23 '21 01:03 welcome[bot]

Current tabs are not controlled. Future tabs selection should be controlled, but that will likely break the tabs, but yes, this should be on the roadmap.

interactivellama avatar Jun 14 '21 16:06 interactivellama

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.

stale[bot] avatar Apr 19 '22 01:04 stale[bot]