Unable to open logout menu

[miketaylr]

STR:

1. go to staging.webcompat.com
2. log in
3. click the "avatar V" menu thing in the top right

expected: dropdown opens
actual: nothing?

Doesn't reproduce on production, AFAICT.

[miketaylr]

Actually, it seems to reproduce on production but only in Firefox? Working in production in Chrome, but not staging. I am very confused.

[miketaylr]

In a private tab in Firefox, on production this is working as expected. Still confused.

[miketaylr]

And now in a regular tab in Firefox on production this is working. But not on staging in Chrome. 👀

[miketaylr]

Working in Safari... this might just be Chrome Canary bug territory.

[karlcow]

Firefox Nightly 72.0a1 (2019-10-22) (64-bit)
macOS 10.15 (19A602)

[ksy36]

This is not working for me in Firefox and Chrome, but only on this page https://webcompat.com/issues/new . Same on staging.

[ksy36]

Seems to be working only on the main page and not on internal pages :)

[miketaylr]

Nice catch @ksy36! For some reason the event handler isn't getting set on the dropdown...

[karlcow]

on https://staging.webcompat.com/issues?page=1&per_page=50&state=open&stage=all&sort=created&direction=desc

confirmed.

[karlcow]

<li class="nav-item login js-login-link js-DropdownHeader">
  <button class="nav-button nav-link" aria-expanded="false" aria-label="My account">
    <img class="login-avatar-img" src="https://avatars0.githubusercontent.com/u/505230?v=4" alt="User Avatar">
    <svg class="icon nav-icon" viewBox="0 0 30 30" role="presentation" aria-hidden="true">
      <use xlink:href="#svg-chevron-right"></use>
    </svg>
  </button>
  <div class="nav-dropdown-wrapper">
    <ul class="dropdown">
      <li class="nav-dropdown-item">
        <a class="nav-link" href="/me">My Activity</a>
      </li>
      <li class="nav-dropdown-item">
        <a class="nav-link" href="/logout">Logout</a>
      </li>
    </ul>
  </div>
</li>

[miketaylr]

We set the handler on the homepage here:

webcompat.com/webcompat/static/js/lib/homepage.js

Lines 50 to 66 in 5e14037

	this.dropDownHandler = function() {
	navDropDown.click(function() {
	var $this = $(this);
	$this.toggleClass("is-active");
	$this.find("button").attr("aria-expanded", function() {
	return $this.hasClass("is-active") ? "true" : "false";
	});
	});
	// close dropdown if you click "outside"
	$(document).on("click", function(e) {
	if (!$(e.target).closest(navDropDown).length) {
	navDropDown.removeClass("is-active");
	navDropDown.find("button").attr("aria-expanded", "false");
	}
	});
	};

[karlcow]

220d5c3
This seems related. We moved navbar in its own file, out of homepage.js

[karlcow]

This is fixing an issue introduced by #2896 for solving #2268