shadcn-svelte icon indicating copy to clipboard operation
shadcn-svelte copied to clipboard

Dialog closeOnEscape not reactive

Open rogerfar opened this issue 7 months ago • 0 comments

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

rogerfar avatar Jul 02 '24 22:07 rogerfar