ionic-team / ionic-team/ionic-framework

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

Đang mở
#22,391 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: react type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

# 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
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.