bug: menuInnerEl is undefined in menu when routing back a page #24907

KANekT · 2022-03-09T08:13:42Z

Prerequisites

I have read the Contributing Guidelines.
I agree to follow the Code of Conduct.
I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v4.x
v5.x
v6.x
v7.x

Current Behavior

"@ionic/vue": "^6.0.10",

ion-menu.js not sync with core

Expected Behavior

in "@ionic/vue": "6.0.10"

const width = this.menuInnerEl.offsetWidth;

in code
https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/menu.tsx#L406
const width = this.menuInnerEl!.offsetWidth; - with !

Steps to Reproduce

npm install
go to
..\node_modules@ionic\core\components\ion-menu.js

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\KANekT\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/vue 6.0.10

Capacitor:

Capacitor CLI : 3.4.3
@capacitor/android : 3.4.3
@capacitor/core : 3.4.3
@capacitor/ios : 3.4.3

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe)
npm : 8.1.4
OS : Windows 10

Additional Information

No response

The text was updated successfully, but these errors were encountered:

KANekT · 2022-03-09T11:03:52Z

await this.loadAnimation();
why it exec loadAnimation if animated = false ?

liamdebeasi · 2022-03-09T14:01:35Z

Thanks for the issue. Can you please describe the problem you are running into?

KANekT · 2022-03-10T05:32:25Z

@liamdebeasi

i have ion-menu on page

then i go to another page where there is no menu

then i go back

ion-menu not work - in console "this.menuInnerEl.offsetWidth is undefined"

liamdebeasi · 2022-03-10T13:50:20Z

Can you please provide a GitHub repo I can use to verify this behavior?

KANekT · 2022-03-11T06:05:01Z

@liamdebeasi https://github.com/KANekT/ion-menu-bug

KANekT · 2022-03-11T06:07:45Z

danielehrhardt · 2022-04-19T14:50:44Z

@liamdebeasi
Same Problem with Angular. Should i create a sample repo or can you reproduce?

liamdebeasi · 2022-04-19T14:51:24Z

I can reproduce the issue, thanks!

KANekT · 2022-04-22T16:57:19Z

@liamdebeasi you have any plan to fixed this Error ?

nodiced922 · 2022-06-12T16:17:46Z

Is this being worked on? Is there a timeframe for the patch? This has been 3 months and is a major bug that breaks the menu. Its issues like these, that make me want to move on from ionic.

nodiced922 · 2022-06-12T16:18:23Z

Any work arounds?

danielehrhardt · 2022-06-12T16:57:20Z

Any work arounds?

<ion-menu
      [disabled]="true"
       menuId="main"

app.component.ts:

ngAfterViewInit() {
       this.menuCtrl.enable(true, "main");
}

ErnestoArtime · 2022-06-21T13:30:57Z

Same problem, any solutions?

nodiced922 · 2022-06-21T13:40:34Z

I had previously been Including my header which contained my menu on each page. I moved this to a single Instance up to my app component and I haven't had an issue with any bugs. I did have to rewire some events, etc triggered by the header, but it was worth the small amount of work to make this change

KANekT · 2022-06-23T13:48:58Z

i use hack in minify files after build vue-tsc --noEmit && vite build:
find

    vs(!this.isAnimating,"can not be animating")

& replace

    this.isAnimating&&document.location.reload()

find loadAnimation() & add

typeof this.menuInnerEl=="undefined"&&document.location.reload();

and then use npx cap sync

KANekT · 2022-09-15T17:06:53Z

@liamdebeasi you planed or not fixed this bug ?

6 month ago it confirmed

YuriZem · 2022-11-08T11:42:03Z

Hi, I'm facing the same problem, any solution?

dbertolini · 2022-11-23T00:10:24Z

Same bug here!

massitashakori · 2022-12-12T01:31:31Z

Seeing the same bug on my app.
The app got frozen with the first interaction after/while loading
Does it seem it is the same bug reported in 2019?! #17948

StavM · 2023-03-30T12:05:03Z

is there any progress on this one ? seems kind of absurd not to fix this one

liamdebeasi · 2023-04-07T16:04:33Z

Can everyone try the following dev build and let me know if it resolves the issue?

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

KANekT · 2023-04-07T17:36:38Z

how I can use this on v6 ?

liamdebeasi · 2023-04-07T17:53:41Z

Normally we don't release bug fixes to previous major versions of Ionic, but this is a high impact bug so I'd like to backport this patch to v6.

Here is a v6 dev build you can try: 6.7.3-dev.11680889549.1f830ade

KANekT · 2023-04-08T03:56:39Z

@liamdebeasi yes it fixed error in may application on v6, thanks

## What is the current behavior?   Issue URL: resolves #24907 `ion-menu` currently clears the `menuInnerEl` and `backdropEl` refs created by Stencil when `disconnectedCallback` is fired. If the `ion-menu` component is re-mounted but _not_ re-rendered, those refs will still be `undefined` when the `open` method is called, resulting in the linked issue. Note that if the `ion-menu` re-renders before `open` is called then this issue does not reproduce. This clearing behavior was added ~6 years ago before we utilized Stencil refs: https://github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137 During this time we had to manually create and clear the element references. Several years later we moved to using Stencil refs, but we did not remove the logic that clears the refs: d83d8ee ## What is the new behavior?  - Menu no longer sets `menuInnerEl` and `backdropEl` to `undefined` in `disconnectedCallback`. - The `close` method is called so that the state is reset prior to the menu being re-added. I observed that without this, the animation to re-present a menu did not work correctly. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information

liamdebeasi · 2023-04-10T19:09:24Z

Thanks for the issue. This has been resolved via #27141, and a fix will be available in an upcoming release of Ionic Framework.

## What is the current behavior?   Issue URL: resolves #24907 `ion-menu` currently clears the `menuInnerEl` and `backdropEl` refs created by Stencil when `disconnectedCallback` is fired. If the `ion-menu` component is re-mounted but _not_ re-rendered, those refs will still be `undefined` when the `open` method is called, resulting in the linked issue. Note that if the `ion-menu` re-renders before `open` is called then this issue does not reproduce. This clearing behavior was added ~6 years ago before we utilized Stencil refs: https://github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137 During this time we had to manually create and clear the element references. Several years later we moved to using Stencil refs, but we did not remove the logic that clears the refs: d83d8ee ## What is the new behavior?  - Menu no longer sets `menuInnerEl` and `backdropEl` to `undefined` in `disconnectedCallback`. - The `close` method is called so that the state is reset prior to the menu being re-added. I observed that without this, the animation to re-present a menu did not work correctly. ## Does this introduce a breaking change? - [ ] Yes - [x] No  ## Other information

Issue URL: resolves #24907 `ion-menu` currently clears the `menuInnerEl` and `backdropEl` refs created by Stencil when `disconnectedCallback` is fired. If the `ion-menu` component is re-mounted but _not_ re-rendered, those refs will still be `undefined` when the `open` method is called, resulting in the linked issue. Note that if the `ion-menu` re-renders before `open` is called then this issue does not reproduce. This clearing behavior was added ~6 years ago before we utilized Stencil refs: https://github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137 During this time we had to manually create and clear the element references. Several years later we moved to using Stencil refs, but we did not remove the logic that clears the refs: d83d8ee  - Menu no longer sets `menuInnerEl` and `backdropEl` to `undefined` in `disconnectedCallback`. - The `close` method is called so that the state is reset prior to the menu being re-added. I observed that without this, the animation to re-present a menu did not work correctly. - [ ] Yes - [x] No

resolves #24907 ---------       Issue URL: resolves #24907 `ion-menu` currently clears the `menuInnerEl` and `backdropEl` refs created by Stencil when `disconnectedCallback` is fired. If the `ion-menu` component is re-mounted but _not_ re-rendered, those refs will still be `undefined` when the `open` method is called, resulting in the linked issue. Note that if the `ion-menu` re-renders before `open` is called then this issue does not reproduce. This clearing behavior was added ~6 years ago before we utilized Stencil refs: https://github.com/ionic-team/ionic-framework/blob/687b37ad3e3237b874473817bb7b59143ac113ce/packages/core/src/components/menu/menu.tsx#L136-L137 During this time we had to manually create and clear the element references. Several years later we moved to using Stencil refs, but we did not remove the logic that clears the refs: d83d8ee  - Menu no longer sets `menuInnerEl` and `backdropEl` to `undefined` in `disconnectedCallback`. - The `close` method is called so that the state is reset prior to the menu being re-added. I observed that without this, the animation to re-present a menu did not work correctly. - [ ] Yes - [x] No

ionitron-bot · 2023-05-10T19:13:55Z

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.

ionitron-bot bot added the triage label Mar 9, 2022

KANekT changed the title ~~bug:~~ bug: not sync vue with Core ? Mar 9, 2022

liamdebeasi added the needs: reply the issue needs a response from the user label Mar 9, 2022

ionitron-bot bot removed the triage label Mar 9, 2022

ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Mar 10, 2022

liamdebeasi added the needs: reply the issue needs a response from the user label Mar 10, 2022

ionitron-bot bot removed the triage label Mar 10, 2022

ionitron-bot bot added triage and removed needs: reply the issue needs a response from the user labels Mar 11, 2022

liamdebeasi changed the title ~~bug: not sync vue with Core ?~~ bug: menuInnerEl is undefined in menu when routing back a page Mar 11, 2022

liamdebeasi added package: core @ionic/core package type: bug a confirmed bug report labels Mar 11, 2022

ionitron-bot bot removed triage labels Mar 11, 2022

liamdebeasi mentioned this issue Mar 24, 2022

bug: Ion-menu - Cannot read properties of undefined (reading 'offsetWidth') #24994

Closed

6 tasks

KANekT mentioned this issue Apr 8, 2022

bug: wrapped menu does not work with content property #16304

Closed

liamdebeasi mentioned this issue Apr 19, 2022

bug: (iOS) Relaunching app and tapping ion-menu freezes app TypeError: undefined is not an object (evaluating 'this.menuInnerEl.offsetWidth') #25148

Closed

7 tasks

This comment was marked as off-topic.

Sign in to view

liamdebeasi added type: bug a confirmed bug report and removed type: bug a confirmed bug report labels Apr 7, 2023

liamdebeasi mentioned this issue Apr 7, 2023

fix(menu): refs are not destroyed on unmount #27141

Merged

2 tasks

liamdebeasi closed this as completed in #27141 Apr 10, 2023

ionitron-bot bot locked and limited conversation to collaborators May 10, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

bug: menuInnerEl is undefined in menu when routing back a page #24907

bug: menuInnerEl is undefined in menu when routing back a page #24907

KANekT commented Mar 9, 2022 •

edited

Loading

KANekT commented Mar 9, 2022

liamdebeasi commented Mar 9, 2022 •

edited

Loading

KANekT commented Mar 10, 2022

liamdebeasi commented Mar 10, 2022

KANekT commented Mar 11, 2022

KANekT commented Mar 11, 2022

danielehrhardt commented Apr 19, 2022

liamdebeasi commented Apr 19, 2022

KANekT commented Apr 22, 2022

nodiced922 commented Jun 12, 2022

nodiced922 commented Jun 12, 2022

danielehrhardt commented Jun 12, 2022

ErnestoArtime commented Jun 21, 2022

nodiced922 commented Jun 21, 2022 •

edited

Loading

KANekT commented Jun 23, 2022 •

edited

Loading

KANekT commented Sep 15, 2022

YuriZem commented Nov 8, 2022 •

edited

Loading

dbertolini commented Nov 23, 2022

massitashakori commented Dec 12, 2022 •

edited

Loading

StavM commented Mar 30, 2023

This comment was marked as off-topic.

liamdebeasi commented Apr 7, 2023

KANekT commented Apr 7, 2023

liamdebeasi commented Apr 7, 2023

KANekT commented Apr 8, 2023

liamdebeasi commented Apr 10, 2023

ionitron-bot bot commented May 10, 2023

bug: menuInnerEl is undefined in menu when routing back a page #24907

bug: menuInnerEl is undefined in menu when routing back a page #24907

Comments

KANekT commented Mar 9, 2022 • edited Loading

Prerequisites

Ionic Framework Version

Current Behavior

Expected Behavior

Steps to Reproduce

Code Reproduction URL

Ionic Info

Additional Information

KANekT commented Mar 9, 2022

liamdebeasi commented Mar 9, 2022 • edited Loading

KANekT commented Mar 10, 2022

liamdebeasi commented Mar 10, 2022

KANekT commented Mar 11, 2022

KANekT commented Mar 11, 2022

danielehrhardt commented Apr 19, 2022

liamdebeasi commented Apr 19, 2022

KANekT commented Apr 22, 2022

nodiced922 commented Jun 12, 2022

nodiced922 commented Jun 12, 2022

danielehrhardt commented Jun 12, 2022

ErnestoArtime commented Jun 21, 2022

nodiced922 commented Jun 21, 2022 • edited Loading

KANekT commented Jun 23, 2022 • edited Loading

KANekT commented Sep 15, 2022

YuriZem commented Nov 8, 2022 • edited Loading

dbertolini commented Nov 23, 2022

massitashakori commented Dec 12, 2022 • edited Loading

StavM commented Mar 30, 2023

This comment was marked as off-topic.

liamdebeasi commented Apr 7, 2023

KANekT commented Apr 7, 2023

liamdebeasi commented Apr 7, 2023

KANekT commented Apr 8, 2023

liamdebeasi commented Apr 10, 2023

ionitron-bot bot commented May 10, 2023

KANekT commented Mar 9, 2022 •

edited

Loading

liamdebeasi commented Mar 9, 2022 •

edited

Loading

nodiced922 commented Jun 21, 2022 •

edited

Loading

KANekT commented Jun 23, 2022 •

edited

Loading

YuriZem commented Nov 8, 2022 •

edited

Loading

massitashakori commented Dec 12, 2022 •

edited

Loading