1410553 - blog.m.o binds category click listeners multiple times when resizing window

Status: NEW

(Infrastructure & Operations :: Blogs, task)

Description

[Stephanie Hobson [:shobson]]

Steps to reproduce:

1) open https://blog.mozilla.org/blog/2017/10/18/mozilla-brings-microsoft-google-w3c-samsung-together-create-cross-browser-documentation-mdn/
2) open RWD
3) clode RWD
4) click on "Categories" in the black sub menu bar

Expected result:
- drop down menu opens and displays categories

Actual result:
- categories menu opens and then immediately closes

I suspect some kind of problem with both touch and mouse events being sent. But I'm not even in RWD mode anymore.

Comment 1

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Wow, thanks for filing!  This is quite strange!

It doesn't seem specific to touch per se.  Here's a similar STR without exiting RDM:

1. Go to https://blog.mozilla.org/blog/2017/10/18/mozilla-brings-microsoft-google-w3c-samsung-together-create-cross-browser-documentation-mdn/
2. Enter RDM
3. Resize to a large width so that "Categories" toggle appears
4. Click on Categories

By debugging the JS for the toggle, it seems like 2 "click" events are received by JS instead of 1.

By default, touch mode in RDM is off, so this issue seems unrelated to touch simulation.

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Appears to be a longstanding issue, not a regression.

Comment 3

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Ah, looks like it's actually a site bug!

The function `initCategories` which adds the click listener (line 48 of https://ffp4g1ylyit3jdyti1hqcvtb-wpengine.netdna-ssl.com/wp-content/themes/frontierline/js/global.js?ver=2.1) can be called multiple times when the window size changes.  For example:

1. Set window width larger than 760 px
2. Go to https://blog.mozilla.org/blog/2017/10/18/mozilla-brings-microsoft-google-w3c-samsung-together-create-cross-browser-documentation-mdn/
  * initCategories is called once on load, but a MQ listener waits for size changes
3. Resize the window below 760 px, and then above 760 px again
  * initCategories is called again, doubling the listeners

I'll move to Websites :: Other for now, but maybe you know a better place for this?

Comment 4

[Kohei Yoshino [:kohei]]

Source: https://github.com/craigcook/frontierline-theme/blob/master/themes/frontierline/js/global.js

Comment 5

[Stephanie Hobson [:shobson]]

I don't know a better place for it.