x/pkgsite: jump to "x" close button broken

[tallclair]

What is the URL of the page with the issue?

https://pkg.go.dev/bytes@go1.18.1, but I think all packages have this problem.

What is your user agent?

Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Screenshot

What did you do?

Click the "Jump To" input in the left panel, click the X button in the top-right of the popup

What did you expect to see?

The popup closes.

What did you see instead?

Nothing happens. No errors captured in the js console.

The close button (bottom right) works.

[jamalc]

We've seen this report before (#50895), I'm finding this hard to reproduce. Does it happen consistently for you, or are you able to provide detailed steps?

It might be less work to reimplement these components than track this down. They were created before widespread browser support for the HTML dialog element and make use of dialog polyfill that is no longer necessary.

[tallclair]

Hmm, it seems to be hit-or-miss when navigating from another page, and also seems to work when I close a tab and reopen it (ctrl-shift-T), but refreshing the page seems to break it pretty reliably.

In a tab where it works, a breakpoint at line 43 of modal.ts is hit:

    for (const btn of this.el.querySelectorAll<HTMLButtonElement>('[data-modal-close]')) {
      btn.addEventListener('click', () => {
        if (this.el.close) {      // <----- breakpoint here is hit when clicking close
          this.el.close();
        } else {
          this.el.removeAttribute('opened');
        }
      });
    }

But on a tab that dosen't work that breakpoint isn't hit.

I also put a breakpoint in the constructor that registers that event handler. When refreshing the page, the constructor isn't called, but when doing a hard refresh (ctrl-shift-R) it is (and subsequently the button works).

Seems like maybe a race condition, but I haven't been able to narrow it down any more.

[gopherbot]

Change https://go.dev/cl/401914 mentions this issue: static/frontend: do not access elements until the page is loaded

[ZekeLu]

I can reproduce the issue like this:

1. Access the page https://pkg.go.dev/bytes@go1.18.1 once so that https://pkg.go.dev/static/frontend/frontend.js is cached.

2. Simulate a slow network with the DevTools (make sure the cache is not disabled) and refresh the page. Most likely that the following code will be executed before the elements .js-modal exist. So that the event handler for the close button is not added.

   for (const el of document.querySelectorAll<HTMLDialogElement>('.js-modal')) {
     new ModalController(el);
   }

I have sent a PR to fix this issue by delaying the execution until the page is fully loaded.

[jamalc]

Thank you for looking into this!