| Summary: | iOS 17 > <button /> inner <form /> can't summon popover element. | ||||||
|---|---|---|---|---|---|---|---|
| Product: | WebKit | Reporter: | Paul Li <meistudioli> | ||||
| Component: | DOM | Assignee: | Nobody <webkit-unassigned> | ||||
| Status: | NEW --- | ||||||
| Severity: | Normal | CC: | alec_g, johanroed, jxck, michal.erlebach, ntim, pimento_trolls.0a, webkit-bug-importer | ||||
| Priority: | P2 | Keywords: | InRadar | ||||
| Version: | Safari 17 | ||||||
| Hardware: | Unspecified | ||||||
| OS: | iOS 17 | ||||||
| Attachments: |
|
||||||
I suspect WebKit is hitting the submit button check: https://searchfox.org/wubkat/rev/f20a3ce20e867a081396437e684de72bf8d52320/Source/WebCore/html/HTMLFormControlElement.cpp#362-363 even though it's not a submit button in the testcase. Needs investigation This is a blocker for adoption of the HTML popover API (which was introduced in by Safari in 17.0). Popovers as popup-tips /tooltips related form input is a very common use case for a popup, from the MDN docs `Typical use cases for the popover API include user-interactive elements like action menus, custom "toast" notifications, form element suggestions, content pickers, or teaching UI.`: ```html <form> <label for="issue">Issue number</label><button type="button" popovertarget="popover-tip">?</button> <div popover="auto" id="popover-tip">You can find the issue number in the url, for example "261945" in https://bugs.webkit.org/show_bug.cgi?id=261945</div> <input type="text" name="issue"/> <button type="submit">Submit</button> </form> ``` The spec does only mentions `If node has a form owner and node is a submit button, then return null.`. Hopefully this is a very simple check gone wrong. Excited for any updates on this! `<input type="button">` does not seem to have the same limitations, and could be a workaround for some until the spec is followed for `<button type="button">` See the following codeine as well: https://codepen.io/Penote/pen/ExrOwwd Same problem here.
I have use-case like below.
- if user has permission, user can submit form
- otherwise, show popover
Do it like below.
```html
<form>
<h1><label>popover DEMO</label></h1>
<textarea id="anchor" name="body"></textarea>
<div id="popover" anchor="anchor" popover>
<p>you dont have permission</p>
</div>
<button type="button" popovertarget="popover">ok</button>
</form>
```
It intended to switch `button[type=submit]` for submit form, otherwise, make it `button[type=button]` for avoid submitting and show popover.
It works as expected in chrome & firefox. but not in safari.
DEMO: https://labs.jxck.io/popover/form.html
happy to see it works.
I have also encountered this and want to highlight that is also occurs in Safari 17.5 on macOS. I hope we can get a fix. A workaround suitable for some situations is to place the triggering button (and other form controls as required) outside of the form. For example this non-working nested form <form id="nested"> <input type="text" /> <button popovertarget="mypopover-2" type="button">More info</button> <div id="mypopover-2" popover>Popover Two content</div> <br> <br> <button type="submit">Submit form</button> </form> can be made to work if re-written in non-nested form: <form id="non-nested"></form> <input type="text" form="non-nested" /> <button popovertarget="mypopover-3" type="button">More info</button> <div id="mypopover-3" popover>Popover Three content</div> <br> <br> <button type="submit" form="non-nested">Submit form</button> As the form is no longer nested, each control needs to reference the form by id using the form attribute. |
Created attachment 467824 [details] test case Safari Version : 17 OS : iOS Steps to reproduce the problem 1. put a <button type="button" /> inner a <form /> and set popovertarget. 2. press the button and expect popover element popup. What is the expected behavior? 1. popover element popup. What went wrong? 1. popover element doesn't popup. Sample code (attachment): <style> #my-popover { inset: 0; padding: 32px; border-radius: 16px; margin: auto; } </style> <form> <button type="button" popovertarget="my-popover">tap me</button> </form> <div id="my-popover" popover>I am popover</div>