bug: Popover does not show-up - Compatibility with Tabs
See original GitHub issueBug Report
Ionic version: [x] @ionic/react 5.1.0
Current behavior: I have an IonTabButton supposed to open a popover. It works in the browser On Android, it does not work directly after start of the app. It works only after we touched an other TabButton.
Expected behavior: The popover should show-up
Steps to reproduce: Copy https://github.com/Toto5931/ionic_popover_bug Run Ionic serve and click on the right tab button (the 3 dots). The popover opens Build the android app. Open the app and click on the right tab button. The popover does not open. If you click on the left tab button then the right tab button it works.
Related code:
const App: React.FC = () => {
const [showPopover, setShowPopover] = useState<{ open: boolean, event: Event | undefined }>({
open: false,
event: undefined,
});
return (
<IonApp>
<IonReactRouter>
<IonTabs>
<IonRouterOutlet>
</IonRouterOutlet>
<IonTabBar slot="bottom">
<IonTabButton tab="tab1" href="/tab1">
<IonIcon icon={mailOutline} />
</IonTabButton>
<IonTabButton onClick={(e) => {setShowPopover({ open: true, event: e.nativeEvent });}} >
<IonIcon icon={ellipsisVerticalOutline} />
</IonTabButton>
</IonTabBar>
</IonTabs>
<IonPopover
isOpen={showPopover.open}
event={showPopover.event}
onDidDismiss={() => setShowPopover({ open: false, event: undefined })}
>
Text
</IonPopover>
</IonReactRouter>
</IonApp>
);
};
Other information:
Ionic info: Ionic:
Ionic CLI : 6.5.0 (C:\Users\zorro\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/react 5.1.0
Capacitor:
Capacitor CLI : 2.0.2 @capacitor/core : 2.0.2
Utility:
cordova-res : not installed native-run : not installed
System:
NodeJS : v12.16.1 (C:\Program Files\nodejs\node.exe) npm : 6.13.4 OS : Windows 10
Thanks
Issue Analytics
- State:
- Created 3 years ago
- Comments:5 (1 by maintainers)
Top GitHub Comments
Thanks a lot !
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.