bug: ionic react IonTabButton overrides user onClick handler

[AndreaBeggiato]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:
onIonClick on TabButton removed.
We used to history.replace and not history.push when a tab is clicked, because our users when navigate between tabs prefer to back to the previous page and not to the previous tab. When they click back and forth through tabs, let's say 10 times, they need to press the back button (hardware or software) 10 times to return to the previous page.

Expected behavior:
Reintroduction of onIonClick on TabButton removed

Steps to reproduce:
Create any tab

[liamdebeasi]

Thanks for the issue. Can you please clarify the issue you are running into with a code example/proper steps to reproduce?

[AndreaBeggiato]

Hello @liamdebeasi
here you can find a code example https://github.com/geekcups-team/ionic-5-tab-issue.
We have an outer tab bar with HomePage and TabPage. Inside TabPage we have two tabs (first and second). If you navigate between first tab and second tab a lot of time, you need to click the back button several time before returning to HomePage. In the previous release of Ionic we used to add a click handler to first tab and second tab buttons, and override the behaviour using history.replace inside the handler. With the new releases of Ionic we can't add such handler anymore.

[sstraus]

Same problem here.
@liamdebeasi have you some suggestions on how to handle click on v5?

[liamdebeasi]

Thanks for the clarification. We already have a feature request to add this functionality: #17761. That being said, you should be able to override the default click event on ion-tab-button:

const handleClick = (ev: Event) => {
  ev.stopImmediatePropagation();

  // Use router.replace or other custom logic here
}
...

<IonTabButton tab="first" href="/tabs/first" onClick={handleClick}>...</IonTabButton>

The key here is ev.stopImmediatePropagation as that will prevent other listeners of the same event from being called. I am going to close this issue, but any progress on this feature will be tracked in #17761. Thanks!

[AndreaBeggiato]

@liamdebeasi I updated the repository https://github.com/geekcups-team/ionic-5-tab-issue and the main problem is that handleClick is never called because IonTabBar overrides the prop.

[liamdebeasi]

Oh weird, onClick was working last time I tested it. It looks like the IonTabButton component overrides any onClick handler you pass it in favor of its internal handler. What we should probably do is call the user's onClick handler and our internal logic, to give users a chance to preventDefault.