Modal dialog link in radio button has inconsistent select behavior

[angela-tran]

There's some inconsistent behavior with closing the modal and what happens to the radio button.

See this GIF where I close the modal by:

• clicking the X
• pressing the Esc key
• clicking off the modal

In the last case, the radio button gets selected.

Originally posted by @angela-tran in #1524 (comment)

Additional context

An attempt to fix this was made in #1524 by consuming the click event, but because the modal content has clickable elements, we can't use that solution.

[indexing]

@machikoyasuda Are we addressing this issue as part of our work to optimize the modal component?

[machikoyasuda]

@indexing No. The modal component optimization is purely all CSS. There's nothing CSS can do to change this behavior. I believe this bug would require digging into Bootstrap JS and writing some custom JS to change the behavior.

[machikoyasuda]

I think I figured out the issue: https://codepen.io/machikoyasuda/pen/vYqENKx

Clicking on the backdrop part of the modal div also triggers clicking on the radio button. The default event bubbling from this click needs to be prevented manually. But also, clicking on the Login.gov text link in the modal shouldn't be deleted. So I came up with this code so far:

$("#modal--login-gov").on('click', function(event) {
    console.log("clicked modal 1");
    console.log(event.target);
    if (!(event.target instanceof HTMLAnchorElement)) {
       event.preventDefault();
       event.stopPropagation();
   }
});