feat: Use Popover API to render the command list

[Bricklou]

Overview

The Popover API is now widely supported. It would be a good idea to move to it.

Why? Because it would allow use to take advantage of the #top-layer context without having to bother about having a z-index issue on the component. Plus, popover can compute screen border by themselves, which means there would be less JS computation to fix offscreen problems.

Who does this impact? Who is this for?

This would concern everything user, and obviously, might be a breaking change to many of them. But on the other hand, it would use supported browser features instead of custom JS behaviour to compute the rendering.

[hoangnhan2ka3]

So what if I have a custom context-menu (which allows the user to copy and paste something in the input of cmdk), and it always appears under the command-menu with the new Popover API?

In short, I think the Popover API is only useful if it is used as a tooltip or information popup, not for something that contains input field like cmdk.

[Bricklou]

Supposing your context menu also uses the popover API (and it technically should), there will be no issue with cmdk using it too (or using the dialog API). Popovers can have sub-popovers and also supports forms inside them. So yeah, there wouldn't be any issues with it, since it will show above.

About the usage, the MDN documents say that popovers in modal mode can be used in many ways:

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