Allow bind:open with <dialog>

[tvanc]

Attempting to use bind:open with <dialog> results in an error:

<!-- Dialog.svelte -->
<script>
  export let open = false
</script>

<dialog bind:open />
<!--
Error: Module build failed (from ./node_modules/svelte-loader/index.js):
Error: ValidationError: 'open' binding can only be used with <details> (17:46)
-->

To Reproduce
View REPL

Expected behavior
I expected bind to work with <dialog> as well as <details>.

Information about your Svelte project:
Svelte v3.21.0

Severity
Annoying.

[tvanc]

I'd love to make a PR but I'm not sure how to write the test.

If anyone could look at my attempt and tell me what I'm doing wrong, that'd be swell.

master...tvanc:openBindingForDialog

[tanhauhau]

interestingly, based on the MDN docs, https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement, there's no event we can listen to determine when a dialog is open.

there's close to know when it is closed. but no way we can tell if it is opened.

[tvanc]

Is having an event necessary for the directive and the test? Maybe we can use MutationObserver as a workaround

[dimfeld]

I don't have a strong opinion on if Svelte should support this, but here's an example I found of using a MutationObserver to fire an event when the dialog opens: https://jsfiddle.net/vmj8d79q/. Looks like it works fine.

[ZerdoX-x]

I really would like to have the ability to bind open property for dialogs in svelte

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ZerdoX-x]

Why details has this option but dialog does not? I don't think it's that hard. I'll try to implement this later

[tvanc]

@ZerdoX-x I'd love to see how you do it. I don't know svelte internals very well. I couldn't figure it out.

[antony]

The lack of a close event could be problematic. I'm also running into this issue, but I wonder if it's actually solveable.

[joepetrakovich]

I'm not sure if I should make a separate issue for this but I noticed something in the same area.

I'm using a dialog like in the below code, which works fine, but if I try to use the <form method='dialog'> technique for closing the dialog based on button clicks, it makes it so the dialog cannot be reopened. Clicking the close button will close the dialog, but subsequent calls to .$set({ open: true}) will not reopen it. I'm guessing because the way the browser implements the form close is destroying the attribute in some way so svelte can't use it.

If I remove the form and just use svelte reactivity, it works fine and allows the dialog to be reopened.

<script>
    export let open = true;
</script>

<dialog {open}>
   <form method='dialog'>
        <button value="cancel">Cancel</button>  //doesn't allow reopening
  </form>
</dialog>

<dialog {open}>
        <button value="cancel" on:click={() => open = false}>Cancel</button> //allows reopening
</dialog>

[KTibow]

idk how bindings internally work but this could be implemented by

• externally set? if you need to make it open, use dialog.showModal(); if you need to make it close use dialog.close()
• changed by browser? listen for the cancel event (fired on esc)