Modal closing when clicking on content inside it

[cdellacqua]

I'm using a modal containing a form with a PasswordInput field. When clicking the show/hide password, the modal closes unexpectedly. I found out after some debugging that the problem is here:
(file Modal.svelte)

on:click={({ target }) => {
    if (!innerModal.contains(target)) {
      open = false;
    }
  }}

By clicking the "hide/show" icon inside the PasswordInput, that icon gets unmounted from the DOM so it can be replaced with another one indicating the opposite action. That causes the .contains method to return false, even though the source of the event was inside the modal when it was originally triggered. This should also apply to similar cases.

[cdellacqua]

A possible solution could be to attach an on:click to the innerModal div that sets a flag to inhibit the close action. Code snippet:

<div
  <!-- outer modal props -->
  on:click={() => {
    if (!inhibitClose) {
      open = false;
    }
    inhibitClose = false;
  }}>
  <div
    <!-- inner modal props -->
    on:click={() => inhibitClose = true}

By doing this, events that propagated from a child of innerModal will set the flag to true (even if unmounted, because the bubbling flow is preserved). Moreover this should be faster than calling .contains, because there is no need to recursively scan the hierarchy of descendants

[cdellacqua]

I saw your PR that fixes this behavior for the PasswordInput component, but I should have probably hightlighted the

This should also apply to similar cases.

part.
In fact, this behavior happens any time an object clicked inside the modal gets unmounted (just like the icon in the PasswordInput). So it's not really the PasswordInput fault (which now doesn't propagate the click, which could be helpful for other parent components), it's the logic inside the on:click handler of the div wrapping the innerModal that's faulty because it doesn't take into account this possibility (and it's pretty common when using {#if} directives). The code snippet I posted in the comment before should really fix the issue at its root.

Sorry if I didn't express myself clearly enough in the original post. Thanks

[metonym]

@cdellacqua interesting solution – will give it a try.

[metonym]

@cdellacqua your solution is brilliant.

• it's more performant because it doesn't use .contains()
• it still allows e.target for the click event forwarded by Modal

[metonym]

@cdellacqua Fixed in v0.9.5

[cdellacqua]

Perfect! Thanks a lot for your time, I'm really appreciating this library.

Closing the issue