Odd action on Firefox and modals

[anlek]

I have a modal that I'm loading a form, that form has a "Edit" mode and in edit mode you can delete the item. Here is Chrome preforming the expected action:

However, in Firefox (Firefox Developer Edition 63.0b9) the modal seems to be clicked on before the element inside it:

  div.step.flex-row.align-items-center.justify-content-between(
    v-click-outside="focusLost"
    v-focus-outside="focusLost"
  )
    // content inside was removed

It seems that the select box is losing focus because of the click on the delete button, however, somehow the modal is gaining the focus (which is outside the div).

My temporary solution was to remove the v-focus-outside="focusLost" and it worked correctly in FF.

[nchutchind]

Sorry for the delay in responding... I didn't know there was an issue sitting here.

It would be difficult to diagnose without a sandbox example to look at. I would like to see a small example, if possible.

Based on what you're saying, it could have a lot to do with how the modal is implemented in those different browsers. It may be possible to solve by looking at the event and element being passed to the handler. Which ui library is the modal from?

The handler method is only called if the event target isn't a child of (or the element proper) that the v-*-outside was placed on. The fact that you're seeing something different means that the browser must be rendering elements in such a way that your event is happening on an element that is unexpected (which would be a browser difference and not a bug with vue-outside-events).