Pfe-tabs pushes to history on every re-render when selectedIndex is 0

[eyevana]

We use pfe-tabs (with nested pfe-tabs) in a React app that re-renders multiple times as each of the fetch calls we make resolve. After upgrading to pfe-tabs 1.0+, we noticed that the first tab of each of the pfe-tabs with history enabled would be automatically pushed to the URL (without clicking on the actual tab). After clicking on some of the tabs, we were also unable to use the back button to go back to the previous page. I added a debugger in pfe-tabs locally and ran into an infinite loop. I think this is the line causing the problem:

https://github.com/patternfly/patternfly-elements/blob/master/elements/pfe-tabs/src/pfe-tabs.js#L273

When the app re-renders pfe-tabs multiple times and already has selectedIndex set to 0, it still sets selectedIndex to 0, because !0 === true, and pushes the same tabId to the URL.

When I change that line to if (this.selectedIndex === null) this.selectedIndex = 0; it works as expected.

Here's the commit where it was changed:

1918511#diff-b51e9c64dcc09f2404d1916140365224f2b18004364f77300af982d2ced9369dR273

Infinite pushState loop caught by Sentry as well:

https://sentry.io/organizations/rhcp/issues/2540042660/?project=1877639&query=is%3Aunresolved&sort=freq&statsPeriod=14d

Impacted component(s)

• pfe-tabs

Steps to reproduce

I wasn't able to reproduce this in a code sandbox unfortunately.

Expected behavior

• It shouldn't push to history unless a tab is clicked (or maybe we should just be using replaceState instead of pushState when updating the history object)
• I should be able to use the browser's back button on a page where pfe-tabs with history is enabled