-
Notifications
You must be signed in to change notification settings - Fork 842
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
Refactor EuiTabbedContent to track its selected tab by name #931
Refactor EuiTabbedContent to track its selected tab by name #931
Conversation
cc @jgowdyelastic who brought this one up originally. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! I had one concern which is kind of out there, but I think it's easy enough to address.
@@ -76,7 +76,9 @@ export class EuiTabbedContent extends Component { | |||
} = this.props; | |||
|
|||
// Allow the consumer to control tab selection. | |||
const selectedTab = externalSelectedTab || this.state.selectedTab | |||
const selectedTab = externalSelectedTab || tabs.find( | |||
tab => tab.name === this.state.selectedTabName |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Realistically, it's very unlikely anyone would ever have multiple tabs with the same name - who does that! But it's theoretically possible, and there's nothing about a property called "name" which implies it should be unique. But this logic depends on it being unique to work correctly. If there are two tabs with the same name, clicking on the second tab will show you the first. How about using id
to track the selected tab instead?
@cjcenizal great catch! I've updated to use |
d6e2380
to
74a46ae
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🐸 LGTM!
Fixes #930
EuiTabbedContent
previously stored the entire tab object in itsselectedTab
state, so any updates/changes to the passed-in tab content was ignored until the user switched away from and back to that same tab. This PR changes the component to track the selected tab by name so it will always pull content from the prop instead of caching it in state.