Fixes dialog closing unexpectedly

[pkleineb]

In the newer versions of dioxus-primitives, dialogs would close when clicking on their internal content such as text and empty space. This PR aims to fix this by using the internal dioxus event implementation instead of javascript. Specifically I removed use_outside_dismiss in the DialogContent and replaced it with an onclick handler on the DialogRoot backdrop.

If this implementation doesn't cover all of use_outside_dismiss's features I'll be happy to add them.

[ealmloff]

Can you share a reproduction for the issues you were running into with the current implementation? I cannot get the dialog on the component demo to close when clicking on the dialog content on chrome, safari, or firefox. While this fix does work with the current way the component is laid out, we use this hook elsewhere where a similar fix is not applicable, so I would like to fix the general problem if we can

[pkleineb]

alright so I retested this and the problem is still around, but under certain conditions only.
A minimum example where the problem arises is this:

use dioxus::prelude::*;

use crate::components::{dialog::*, tabs::*};

const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");

mod components;

fn main() {
    dioxus::launch(App);
}

#[component]
fn App() -> Element {
    rsx! {
        document::Link { rel: "icon", href: FAVICON }
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        Hero {}

    }
}

#[component]
pub fn Hero() -> Element {
    let mut open = use_signal(|| false);

    rsx! {
        Tabs {
            default_value: "test".to_string(),
            horizontal: false,
            TabList {
                TabTrigger { value: "test".to_string(), index: 0usize }
                TabContent { index: 0usize, value: "test".to_string(),
                    button { onclick: move |_| open.set(true), "test" }
                    Dialog { open: open(), on_open_change: move |new| open.set(new),
                        style: "background-color: blue;",
                        div {
                            span { "test" }
                        }
                        button {
                            "test button"
                        }
                    }
                }
            }
        }
    }
}

Where I just created a a bare-bones web project with no additional features and added the dialog and tabs using
dx components add dialog tabs.
I tried it out on firefox as well as chorme and both had the same issue, where clicking inside of the dialog, it would just close.

This behaviour only happens, when the dialog itself is inside the TabContent, so when setting the component up like this:

#[component]
pub fn Hero() -> Element {
    let mut open = use_signal(|| false);

    rsx! {
        Tabs {
            default_value: "test".to_string(),
            horizontal: false,
            TabList {
                TabTrigger { value: "test".to_string(), index: 0usize }
                TabContent { index: 0usize, value: "test".to_string(),
                    button { onclick: move |_| open.set(true), "test" }
                }
            }
        }
        Dialog { open: open(), on_open_change: move |new| open.set(new),
            style: "background-color: blue;",
            div {
                span { "test" }
            }
            button {
                "test button"
            }
        }
    }
}

The dialog behaves normally not closing when being clicked inside. I also tried nesting the dialog in just the Tabs and TabList and both also worked fine. The closing only becomes a problem when the Dialog is actually in the TabContent.

I am not sure if this is problematic with other primitives/page structures though.

[pkleineb]

Through LLM help, I found out, that giving the DialogContent any tabindex fixes this bug, since otherwise a focusin event would happen that walks up the dom stopping only at the TabContent since it has a tabindex set. Therefore the focusin would trigger there and use_outside_dismiss would notice this event and send true to dioxus back since the TabContent is not a child of the DialogContent.

Now the question is, should we set a default tabindex on the DialogContent or should a consumer of the API be expected to set their own? If the first solution is preferred I can overwrite my fix from this PR with the tabindex fix.