Tabs: fix initial tab selection in more cases #449
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
The design flaw in tabs was letting each individual tab manage its own state when clicked. This created issues with state management centralization and reasoning. This change instead moves the job of state management to the Tabs component, which coordinates the individual Tab and TabPanel components it contains. This results in smoother management and, ultimately, a more correct implementation.
🦋 Changeset detectedLatest commit: 1c33895 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
size-limit report 📦
|
daneah
commented
Nov 10, 2022
Comment on lines
-25
to
-29
| it('updates selected state when clicked', async () => { | ||
| component.click(); | ||
| await component.updateComplete; | ||
| expect(component.selected).to.be.true; | ||
| }); |
There was a problem hiding this comment.
Individual tabs no longer manage this state themselves
Comment on lines
65
to
67
| private _handleClick(): void { | ||
| this.selected = true; | ||
| this._triggerSelectedEvent(); | ||
| } |
There was a problem hiding this comment.
On click, individual tabs now only fire the event saying that they got selected; they don't manage the transition to actual selected state themselves.
Comment on lines
55
to
59
| private _selectInitialTab(): void { | ||
| const selected: PharosTab | null = this.querySelector(`${_allTabsSelector}[selected]`); | ||
| const selectedTab: PharosTab = selected ? selected : this._tabs[0]; | ||
| this._handleTabSelected(selectedTab); | ||
| } |
There was a problem hiding this comment.
Simplified this function by adjusting _handleTabSelected to work agnostic of how/why the tab got selected, instead of managing different cases of selection different ways.
| const previous: PharosTab | null = this.querySelector( | ||
| `[data-pharos-component="PharosTab"][selected]:not([id="${selected.id}"])` | ||
| private _handleTabSelected(selectedTab: PharosTab): void { | ||
| selectedTab.selected = true; |
There was a problem hiding this comment.
Tabs component now sets selected for the Tab component.
| previous.selected = false; | ||
| const panel: PharosTabPanel | null = this.querySelector( | ||
| `[data-pharos-component="PharosTabPanel"][id="${previous.getAttribute('aria-controls')}"]` | ||
| if (previousTab && previousTab != selectedTab) { |
There was a problem hiding this comment.
There was a bug where you could click a tab repeatedly and it would select/deselect/select/deselect.
daneah
requested review from
eslawski,
SMQuazi and
satya-achanta-venkata
and removed request for
a team
chrisjbrown
reviewed
Nov 10, 2022
chrisjbrown
reviewed
Nov 10, 2022
chrisjbrown
approved these changes
Nov 10, 2022
jialin-he
approved these changes
Nov 10, 2022
daneah
added a commit
that referenced
this pull request
Nov 10, 2022
* develop: Tabs: fix initial tab selection in more cases (#449) Storybook: add eslint-plugin-storybook and fix issues (#446) feat(storybook): install Measure and Outline addons (#445) Docs: update copy for Button's on-background usage (#444) Storybook: Convert stories to CSF 3 (#435) feat(tabs): fire event when tab selected programmatically (#442) ToggleButton: indicate toggle button state on underlying button elements (#438) Tooltip, DropdownMenu: replace popperjs with floating-ui (#434) Site: improve imports (#433)
Merged
sirrah-tam
pushed a commit
to sirrah-tam/pharos
that referenced
this pull request
Dec 1, 2023
* fix(tabs): fix initial tab selection in more cases The design flaw in tabs was letting each individual tab manage its own state when clicked. This created issues with state management centralization and reasoning. This change instead moves the job of state management to the Tabs component, which coordinates the individual Tab and TabPanel components it contains. This results in smoother management and, ultimately, a more correct implementation. * chore: add changeset * fix(tabs): only trigger event when selected prop changes * refactor(tabs): shorten ternary logic
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change: (check at least one)
Is this a breaking change? (check one)
Is the: (complete all)
What does this change address?
Fixes #346
Supersedes #448
How does this change work?
The design flaw in tabs was letting each individual tab manage its own state when clicked. This created issues with state management centralization and reasoning. This change instead moves the job of state management to the Tabs component, which coordinates the individual Tab and TabPanel components it contains. This results in smoother management and, ultimately, a more correct implementation.