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

Refactor EuiTabbedContent to track its selected tab by name #931

Merged

Conversation

chandlerprall
Copy link
Contributor

Fixes #930

EuiTabbedContent previously stored the entire tab object in its selectedTab 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.

@snide
Copy link
Contributor

snide commented Jun 15, 2018

cc @jgowdyelastic who brought this one up originally.

Copy link
Contributor

@cjcenizal cjcenizal left a 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
Copy link
Contributor

@cjcenizal cjcenizal Jun 15, 2018

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?

@chandlerprall
Copy link
Contributor Author

@cjcenizal great catch! I've updated to use id instead of name

@chandlerprall chandlerprall force-pushed the bug/930-tabbed-content-updates branch from d6e2380 to 74a46ae Compare June 18, 2018 15:44
Copy link
Contributor

@cjcenizal cjcenizal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🐸 LGTM!

@chandlerprall chandlerprall merged commit 53155b7 into elastic:master Jun 18, 2018
@chandlerprall chandlerprall deleted the bug/930-tabbed-content-updates branch June 18, 2018 15:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants