HTMLElement.togglePopover can't close the popover when applied on <td>

[LcsGa]

What is the issue with the HTML Standard?

I've been facing this weird issue where the togglePopover doesn't work when it is for closing the popover on a <td> element (I don't know if it's the only element that has this issue though).

My popover is set to auto (by default) and I toggle it with that method (which always wroked well until then, but I may be missing something) (never faced any issue with popovertarget, that's what I mean).

After doing my best to debug it, I've found that the beforetoggle event is triggered twice (close then open) (but not the toggle one, strangely). => if I prevent the opening one (when concurrent with the closing one), then everything works find (this is my only workaround for now).

Here is a reproduction of the issue (and warkaround) https://codepen.io/lcsga/pen/wBwPeMY

If I forget to provide some other needed informations, let me know, I'd do my best to complete it asap!

[scottaohara]

i looked at your codepen and noticed you commented out the workaround. did you end up resolving your issue? i'm not having issues opening or closing the popovers in your test using mouse or keyboard? maybe i'm missing something.

but with that said - i'm not sure i really understand the use case here. why you wouldn't put a button within those TDs to mitigate the issue you're potentially facing / make this accessible for people using screen readers. TD elements (role=cell) don't support the expanded state in the a11y tree, so there'd be a lot of extra work needed to ensure this behavior would be properly conveyed to people using screen readers. That is, unless you nested button elements inside the TDs and used those to toggle the popovers - then no JS or extra ARIA for your buttons would be necessary.

[LcsGa]

No I didn't find any other solution yet, I just commented it so that people testing it could see the issue right away.
Don't you have the issue when you click on the click me cell only? If I do, I still have the same behavior => would open but won't close (If I click anywhere else then it works fine though and didn't mention it, my bad!)

About your second point, you're completely right! My answer might not convince you (and for a good reason, because I simply avoid another problem) but I did it because the popover would not align correctly with mat-tables when the target is something within a cell, and not the cell itself...
I unfortunately have to use this library (that I must not override as much as possible) for tables (and everything else btw) (I don't have that alignement issue with "vanilla" tables).
I know the solution I should find should be related to this alignement issue instead, but still, the behavior of togglePopover is still weird there, isn't it?

[annevk]

I'm not immediately sure what's wrong here, but this also reproduces if I replace the <td>s with <div>s.

[LcsGa]

Nice to know! It might not be as niche as I first thought then!

By the way, I made this angular material reproduction of my original alignement issue that made me try using the cell itself as the target, if you're intersted into it too (but it might need its own issue and might be "out of context" here)

[annevk]

I can also reproduce with

<div id=popover1 popover>popover</div>
<div onclick=popover1.togglePopover()>test</div>

but not with popover=manual. Maybe @nt1m or @josepharhar will know what's up. It does seem that if this is the intended behavior we should update the web-developer-facing documentation for togglePopover().

[LcsGa]

By the way, reading you helped me rethink about it and I found a way better workaround for my use case:

• keeping the button as the popovertarget
• anchor-name on the td

=> no alignement issue anymore, no bug, no a11y issue!