Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Menu does not work when you change from Mobile to Desktop mode #5402

Closed
mcspronko opened this issue Jul 1, 2016 · 18 comments
Closed

Menu does not work when you change from Mobile to Desktop mode #5402

mcspronko opened this issue Jul 1, 2016 · 18 comments

Comments

@mcspronko
Copy link
Contributor

@mcspronko mcspronko commented Jul 1, 2016

Preconditions

Magento 2

Steps to reproduce

  1. Create Parent category, and sub-category as part of the parent in Admin
  2. Navigate to frontend.
  3. Observe newly created category on desktop browser.
  4. Resize browser to be mobile (width < 760px)
  5. Resize browser back to be show full menu.
  6. Click on any of the top level category links from the menu.

Expected result

  1. User should be redirected to a page with link provided from Category url-key clicked in menu.

Actual result

  1. Nothing happens.
@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jul 1, 2016

Synopsis

  • File affected /lib/web/mage/menu.js
  • The issue is that the _on event binded in _toggleMobileModeis never unbinded.

Possible fix

Unsubscribe _off event in _toggleDesktopMode method as follows:

...
_toggleDesktopMode: function () {
   this._off(this.element, 'click');
...
@veloraven

This comment has been minimized.

Copy link
Contributor

@veloraven veloraven commented Sep 13, 2016

@mcspronko thank you for your report.
Please specify Magento version used.

@mcspronko

This comment has been minimized.

Copy link
Contributor Author

@mcspronko mcspronko commented Sep 13, 2016

Magento 2.1

@guz-anton

This comment has been minimized.

Copy link
Contributor

@guz-anton guz-anton commented Oct 4, 2016

The internal issue was created MAGETWO-59327.

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

@magento-engcom-team magento-engcom-team commented Oct 3, 2017

@mcspronko, thank you for your report.
We were not able to reproduce this issue by following the steps you provided. If you'd like to update it, please reopen the issue.
We tested the issue on 2.3.0-dev, 2.2.0, 2.1.9

@patrickwachira510

This comment has been minimized.

Copy link

@patrickwachira510 patrickwachira510 commented Jan 21, 2018

I am having the same issue with Magento 2.2. Sub menu works on desktop mode but not mobile. wachirawines.com

@chris-pook

This comment has been minimized.

Copy link
Contributor

@chris-pook chris-pook commented Sep 6, 2018

This is very much still an issue and easily replicable in Chrome 68 and Firefox 61:

  • On a Magento2 site with categories setup, browse to any page in > 767px window size.
  • Reduce the window size down, so that the mobile menu appears.
  • Bring the window size back up above 767px.
  • Try to click any of the top level category links from the menu.

I am certainly seeing this in 2.2.3 and 2.2.5.

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Sep 6, 2018

@chris-pook, thank you for the update.
We've acknowledged the issue and added to our backlog.

@ghost ghost added Issue: Confirmed and removed Issue: Cannot Reproduce labels Sep 6, 2018
@ghost ghost removed their assignment Sep 6, 2018
@emanuelarcos

This comment has been minimized.

Copy link

@emanuelarcos emanuelarcos commented Sep 8, 2018

@magento-engcom-team give me 2.2.6 instance

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

@magento-engcom-team magento-engcom-team commented Sep 8, 2018

Hi @emanuelarcos. Thank you for your request. I'm working on Magento 2.2.6 instance for you

@okorshenko

This comment has been minimized.

Copy link
Contributor

@okorshenko okorshenko commented Sep 8, 2018

@magento-engcom-team give me 2.2.5 instance

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

@magento-engcom-team magento-engcom-team commented Sep 8, 2018

Hi @okorshenko. Thank you for your request. I'm working on Magento 2.2.5 instance for you

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

@magento-engcom-team magento-engcom-team commented Sep 8, 2018

Hi @okorshenko, here is your Magento instance.
Admin access: https://i-5402-2-2-5.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

@emanuelarcos

This comment has been minimized.

Copy link

@emanuelarcos emanuelarcos commented Sep 8, 2018

@magento-engcom-team give me 2.2-develop instance

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

@magento-engcom-team magento-engcom-team commented Sep 8, 2018

Hi @emanuelarcos. Thank you for your request. I'm working on Magento 2.2-develop instance for you

@magento-engcom-team

This comment has been minimized.

Copy link
Contributor

@magento-engcom-team magento-engcom-team commented Sep 8, 2018

Hi @emanuelarcos, here is your Magento instance.
Admin access: https://i-5402-2-2-develop.engcom.dev.magento.com/admin
Login: admin Password: 123123q
Instance will be terminated in up to 3 hours.

@sidolov

This comment has been minimized.

Copy link
Contributor

@sidolov sidolov commented Sep 22, 2018

Hi @mcspronko. Thank you for your report.
The issue has been fixed in #17990 by @emanuelarcos in 2.2-develop branch
Related commit(s):

The fix will be available with the upcoming 2.2.8 release.

@sidolov sidolov closed this Sep 22, 2018
@koopjesboom

This comment has been minimized.

Copy link

@koopjesboom koopjesboom commented Jul 11, 2019

Best,

Magento 2.3.2

Edit /lib/web/mage/menu.js
Add a empty line under $(this.element).off('mouseenter mouseleave click');
So between Line 484 and line 486 Line 485 must be empty to keep it simple.
And the mobile menu is working on magento 2.3.2
Seems 1% is testing there mobile site so this can be useful.

481 _toggleDesktopMode: function () {
482 var categoryParent, html;
483
484 $(this.element).off('mouseenter mouseleave click');
485 -->empty line
486 this._on({
487 /**
488 * Prevent focus from sticking to links inside menu after clicking

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.