Bug 261945 – iOS 17 > <button /> inner <form /> can't summon popover element.

• Component: DOM
• Status: RESOLVED DUPLICATE

[Paul Li]

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>

[Tim Nguyen (:ntim)]

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

[Radar WebKit Bug Importer]

<rdar://problem/116235346>

[johan]

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!

[johan]

`<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">`

[Thomas Cannon]

See the following codeine as well: https://codepen.io/Penote/pen/ExrOwwd

[Jxck]

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.

[Alec]

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.

[Leevi]

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>

[Leevi]

Related issue: https://bugs.webkit.org/show_bug.cgi?id=275899

PR to fix issue: https://github.com/WebKit/WebKit/pull/30187

[Luke Warlow]

*** This bug has been marked as a duplicate of bug 275899 ***