popover attribute results in non-default behaviour when dismissing

[nigeleke]

Problem

The default behaviour for a popover, when clicking outside of a displayed popover is to hide it. See & try mozilla.

<button popovertarget="my-popover">Open Popover</button>
<div popover id="my-popover">Greetings, one and all!</div>

The dioxus equivalent displays the popover, but it is only hidden when the button is re-clicked.

Steps To Reproduce

Steps to reproduce the behavior:

1. Create dx new popover project (all defaults).

2. Replace App() -> Element function with:

        document::Link { rel: "icon", href: FAVICON }
        document::Link { rel: "stylesheet", href: MAIN_CSS }
        button { popovertarget: "my-popover", "Open Popover" }
        div { popover: true, id: "my-popover", "Greetings, one and all!" }

3. dx serve and goto http://localhost:8080/

4. Click Open Popover

5. Click else where on window.

Expected behavior

The popover div should be hidden.

Additional Info:

the popover attribute requires a value in dioxus, but not in html. The value true gives a invalid value warning when viewing the html. After completing the dx serve I can go and manually edit the popover="true" attribute to just popover and everything works as expected.

It appears we may requires a mechanism in dioxus to correctly handle attributes with no value:

        div { popover, id: "my-popover", "Greetings, one and all!" }

Environment:

• Dioxus version: 0.6.1
• Rust version: rustc 1.82.0 (f6e511eec 2024-10-15)
• OS info: Fedora Linux 41 (Workstation Edition)
• App platform: web

[nigeleke]

The correct value for popover should be "auto". Everything then works as expected.

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/popover