Tabbing does not work inside modal

Author: mitchdowneyCreated Oct 28, 2019Updated Feb 2, 2025

Summary:

Not sure if this is a bug or if I messed something up. The problem is that I can't reproduce the bug on localhost, and can only reproduce it in prod :/

Tabbing does not work inside the modal. The modal never gains focus, and after I click inside inputs, pressing tab has no effect.

I'm using OSX Catalina, and the same issue happens in Chrome 77 and Firefox 67.

Steps to reproduce:

(Sorry I don't have time for a proper demo right now. I can possibly revisit this again to create a demo someday.)

  1. Go to podverse.fm
  2. Click the dropdown icon in upper-right corner of the navigation
  3. Click Login to trigger the modal
  4. The modal does not take on focus, and pressing tab has no effect in the modal.

The code for this modal can be found here.

Expected behavior:

Expected the modal to take focus once it is shown, and for tab to be able to navigate between the focusable elements. Also expect this behavior to be consistent on both localhost and prod.