261945 2023-09-22 06:48:56 -0700 iOS 17 > <button /> inner <form /> can't summon popover element. 2024-08-27 23:43:51 -0700 1 1 1 Unclassified WebKit DOM Safari 17 Unspecified iOS 17 RESOLVED DUPLICATE 275899 InRadar P2 Normal --- 1 meistudioli webkit-unassigned alec_g johanroed jxck leevi lwarlow ntim pimento_trolls.0a webkit-bug-importer oldest_to_newest 1979337 0 467824 meistudioli 2023-09-22 06:48:56 -0700 Created attachment 467824 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> 1979483 1 ntim 2023-09-22 15:39:05 -0700 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 1981258 2 webkit-bug-importer 2023-09-29 06:49:14 -0700 <rdar://problem/116235346> 2010749 3 johanroed 2024-02-05 11:47:06 -0800 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! 2010765 4 johanroed 2024-02-05 12:10:46 -0800 `<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">` 2019937 5 pimento_trolls.0a 2024-03-10 10:01:17 -0700 See the following codeine as well: https://codepen.io/Penote/pen/ExrOwwd 2029395 6 jxck 2024-04-18 01:25:24 -0700 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. 2044539 7 alec_g 2024-07-03 14:30:21 -0700 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. 2052903 8 leevi 2024-08-14 20:15:35 -0700 This issue is also in WebKit 19619.1.22.5 (Safari 18.0, Release 199) <form> <button type="button" popovertarget="test">Pop not a form</button> <div id="test" popover>Test</div> </form> <button type="button" popovertarget="test2">Pop not a form</button> <div id="test2" popover>Test2</div> 2053204 9 leevi 2024-08-15 21:06:46 -0700 Related issue: https://bugs.webkit.org/show_bug.cgi?id=275899 PR to fix issue: https://github.com/WebKit/WebKit/pull/30187 2055660 10 lwarlow 2024-08-27 08:50:10 -0700 *** This bug has been marked as a duplicate of bug 275899 *** 467824 2023-09-22 06:48:56 -0700 2023-09-22 06:48:56 -0700 test case ios17_safari_popover.html text/html 231 meistudioli PHN0eWxlPgojbXktcG9wb3ZlciB7CiAgaW5zZXQ6IDA7CiAgcGFkZGluZzogMzJweDsKICBib3Jk ZXItcmFkaXVzOiAxNnB4OwogIG1hcmdpbjogYXV0bzsKfQo8L3N0eWxlPgoKPGZvcm0+CiAgPGJ1 dHRvbiB0eXBlPSJidXR0b24iIHBvcG92ZXJ0YXJnZXQ9Im15LXBvcG92ZXIiPnRhcCBtZTwvYnV0 dG9uPgo8L2Zvcm0+CjxkaXYgaWQ9Im15LXBvcG92ZXIiIHBvcG92ZXI+SSBhbSBwb3BvdmVyPC9k aXY+