Cannot click outside dialog (not closing)

[Odonno]

Before you start...

• [X] Have you updated your dependencies? You might be using an old version of the library.
• [X] Have you checked for an existing issue on this topic? If there is one, post a comment on it instead.

What browsers are you seeing the problem on?

Microsoft Edge

Description

I want to open a closable dialog. Currently, it works with the Esc key. I also want to close it when clicking outside. Any of these events are never triggered: backdropclick, backdropmousedown.

Steps To Reproduce

<script>
    import { Button, ContentDialog } from "fluent-svelte";

    let open = true;
</script>

<Button on:click={() => open = true}>
    Open
</Button>
<ContentDialog bind:open title="Dialog Title" on:backdropclick={() => open = false} on:backdropmousedown={() => open = false}>
    Some text
    <svelte:fragment slot="footer">
        <Button variant="accent" on:click={() => open = false}>
            Button 1
        </Button>
        <Button on:click={() => open = false}>
            Button 2
        </Button>
    </svelte:fragment>
</ContentDialog>

<style>
    @import url("https://unpkg.com/fluent-svelte/theme.css");

    :global(body) {
        background-color: var(--fds-solid-background-base);
        color: var(--fds-text-primary);
    }
</style>

Expected behavior

When a dialog is opened, I'd like to close it when I click outside the dialog.

Relevant Assets

No response

[Tropix126]

The backdrop not closing when clicked is by design, however backdropclick and backdropmousedown should be dispatching. I've identified the problem and pushed a fix. Expect it to be working in the next release.

[Tropix126]

(should be) Fixed as of 1.3.0.

[Odonno]

Well, now it works but it works too well. :)

Indeed, it closes the dialog when I click outside but it also closes it when I click inside the dialog. :(

[Odonno]

Any news on this @Tropix126 ?

[Tropix126]

Uh oh. Let me have a look at that.

[Tropix126]

Fixed this. Will publish a patch as soon as I get home.

[Tropix126]

Alright, now it should actually work as intended as of 1.3.1.

[Odonno]

Hum, sorry to bring the bad news, but 1.3.1 did not fix anything. I still close the dialog when I click inside it. Maybe it's me but I don't know why it does not work. Here is my code:

<script lang="ts">
    export let open: boolean;
</script>

<ContentDialog
    bind:open
    title="Authentication"
    on:backdropclick={() => (open = false)}
    on:backdropmousedown={() => (open = false)}
>
    <div>Select the....</div>

    <Button slot="footer" on:click={() => (open = false)}>Close</Button>
</ContentDialog>

[Tropix126]

Ah, this never ends, does it. 😆 Turns out the change I made didn't end up being pushed to 1.3.1. Next publish will fix this later today.

see: 18c99a7b7a75aa645180d023d483fabdd02ef0db

[Tropix126]

If I somehow manage to mess this up again, here is a temporary workaround that works on the latest build.

https://svelte.dev/repl/9d75aa707ed64415ab918701c6ac3fb3?version=3.46.3

[Odonno]

Yep, I'll keep coming back to kill the Omega.

Anyway, your temporary fix seems to work. Thank you very much for your help on this.