shadcn-svelte
shadcn-svelte copied to clipboard
Dialog closeOnEscape not reactive
Describe the bug
When creating a dialog root and passing closeOnEscape with a reactive parameter, it won't change the behaviour when the dialog is opened.
The closeOnOutsideClick
option does honor the changed value.
Reproduction
$: canClose = true;
<Dialog.Root bind:open closeOnEscape={canClose} closeOnOutsideClick={canClose}>
<Dialog.Content>
<Dialog.Body>
<Button on:click={() => canClose = false;}>Change state</Button>
</Dialog.Body>
</Dialog.Content>
</Dialog.Root>
When opened, it allows to close by pressing escape or clicking outside.
Open, then press the "Change State" button, then it will still react to the escape key, but not to clicking outside.
Logs
No response
System Info
System:
OS: Windows 10 10.0.19045
CPU: (24) x64 13th Gen Intel(R) Core(TM) i7-13700
Memory: 32.86 GB / 63.79 GB
Binaries:
Node: 20.15.0 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.22 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (126.0.2592.81)
Internet Explorer: 11.0.19041.4355
npmPackages:
@sveltejs/kit: ^2.5.18 => 2.5.18
bits-ui: ^0.21.11 => 0.21.11
cmdk-sv: ^0.0.17 => 0.0.17
lucide-svelte: ^0.399.0 => 0.399.0
mode-watcher: ^0.3.1 => 0.3.1
svelte: ^4.2.18 => 4.2.18
svelte-sonner: ^0.3.24 => 0.3.24
vaul-svelte: ^0.3.2 => 0.3.2
### Severity
annoyance