How do I locate the function that is stealing DOM focus?

Question

I'm trying to debug the integration between my app and Stripe's Elements component library. Everything works fine in sandbox mode, but we ran into a problem on production in the 3D Secure authentication process. This involves loading an iframe, into our app, that contains a form from the credit card's issuer (usually via a technology partner, like Arcot).

The form loads correctly and its buttons are working as expected, but the element (for a SMS one time code) is not behaving. Every time I click on the input, something is immediately pushing the focus back to the element of the iframe. This makes it impossible to type anything in, since by the time I touch a key, the input is not in focus. For reference, it is possible to change the input's value using document.getElementById('enterPIN').value = '123456';

I'm not sure if my app is triggering focus() calls (I don't think so) or if it is some part of the iframe code or even Stripe's. Is there a good way to monitor DOM events and do a stack trace for the trigger of each one?

Infallible

Answer 1

I found this helpful: https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/focus

Adding document.activeElement as a live expression in the chromium console allows you to watch in real time which element is focused.

Euphorbia

Answer 2

I tried two tactics. Neither gave an obvious answer, but they did point my search in the right direction.

1. I opened the Event Listeners panel (in the Elements tab of my browser's developer tools) and removed everything I could find, but it seems that this doesn't actually change the behavior of the page- focus kept being stolen away. Luckily, I also noticed some listeners that were defined by the Material UI library.
2. I used monitorEvents() to get a few more details, but the src & target values were not much help and event.relatedTarget was always null.

In the end, I found this discussion and realized that my MUI Dialog component was stealing focus whenever I clicked on the iframe triggered by its content. This was easily fixed by adding the disableEnforceFocus attribute.

Infallible