ionic-team / ionic-team/ionic-framework
bug: href property on tab button required for routing despite allowing undefined
- Vorherrschende Sprache
- TypeScript
- Sterne
- 52.7k
- Forks
- 13.3k
- Ø Merge
- 1 T. 15 Std.
- Gemergte PRs (30 T.)
- 51
Beschreibung
# 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
```
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.