ionic-team / ionic-team/ionic-framework

bug: href property on tab button required for routing despite allowing undefined

Abierto
#22,391 2 comentarios 0 reacciones 0 asignados Ver en GitHub
package: react type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

# Bug Report

**Ionic version:**

[x] **5.0.7**

**Current behavior:**

I am using an IonTabs project. In my tab bar at the bottom, I have a "Create" button that I would like to have trigger a modal on the screen. However, when I click the tab, I receive a routing error because I am not including the `href` property in the `IonTabButton`. The `href` property isn't marked as required, so I figured I could remove the `href` property since I don't want to be routed to a different page. Instead I'd like to call the `onClick` event to trigger the modal on the screen.

Obviously, it's trying to find the value of the `href` and errors on the `split`.

Repo to replicate: https://github.com/uncvrd/tabs-as-buttons (I only modified the App.tsx)

Steps to recreate:
1. Ionic Serve
2. Click the "Create" tab at the bottom of the page

I would like to be able to use the `IonTabButton` as a normal button if the `href` is not added as a property.

Stack trace here:

```
×
TypeError: Cannot read property 'split' of undefined
IonRouterInner.handleChangeTab
src/ReactRouter/IonRouter.tsx:78
75 |
76 | handleChangeTab(tab: string, path: string, routeOptions?: any) {
77 | const routeInfo = this.locationHistory.getCurrentRouteInfoForTab(tab);
> 78 | const [pathname, search] = path.split('?');
| ^ 79 | if (routeInfo) {
80 | this.incomingRouteParams = { ...routeInfo, routeAction: 'push', routeDirection: 'none' };
81 | if (routeInfo.pathname === pathname) {
View compiled
IonTabBarUnwrapped.onTabButtonClick
src/components/navigation/IonTabBar.tsx:178
175 | this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
176 | }
177 | this.setActiveTabOnContext(e.detail.tab);
> 178 | this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
| ^ 179 | }
180 | }
181 |
View compiled
IonTabButton.handleIonTabButtonClick
src/components/navigation/IonTabButton.tsx:23
20 |
21 | handleIonTabButtonClick() {
22 | if (this.props.onClick) {
> 23 | this.props.onClick(new CustomEvent('ionTabButtonClick', {
| ^ 24 | detail: { tab: this.props.tab, href: this.props.href, routeOptions: this.props.routerOptions }
25 | }));
26 | }
View compiled
HTMLElement.handler
src/components/utils/attachProps.ts:91
88 |
89 | // Bind new listener.
90 | node.addEventListener(eventName, eventStore[eventName] = function handler(e: Event) {
> 91 | if (newEventHandler) { newEventHandler.call(this, e); }
92 | });
93 | };
94 |
View compiled
```

**Ionic info:**

```
Ionic:

Ionic CLI : 6.7.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.4.1

Capacitor:

Capacitor CLI : 2.4.2
@capacitor/core : 2.4.2

Utility:

cordova-res (update available: 0.15.1) : 0.14.0
native-run (update available: 1.2.2) : 1.0.0

System:

NodeJS : v12.16.2 (/usr/local/bin/node)
npm : 6.14.4
OS : macOS Catalina
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.