<s-popover> improvements

Polaris
22

does that include having it be scrollable? otherwise I have a full working implementation, but as shown above its not usable since it doesn’t behave correctly when there are too many options.

23

Here’s a hacky solution I found to open/close the popover programatically while the Shopify dev team implements an official way to do this:

       <s-search-field label="Search" labelAccessibilityVisibility="exclusive" placeholder="Search products" onInput={(e)=>{
const commandEvent = new Event("command");
commandEvent.command = "--show";
commandEvent.source = e.target.shadowRoot.firstChild;
commandEvent.F = commandEvent.source;
popover.current.dispatchEvent(commandEvent);
        }} onBlur={(e)=>{
const commandEvent = new Event("command");
commandEvent.command = "--hide";
commandEvent.source = e.target.shadowRoot.firstChild;
commandEvent.F = commandEvent.source;
popover.current.dispatchEvent(commandEvent);
        }} />

<s-popover ref={popover} id="product-search-popover" placement="bottom-start">
            Popover!
</s-popover>

While a programatic solution would be welcome, an alternative would be to just allow commandFor and command on the text inputs and handle that automatically just the way it does with buttons.

Note: The .source / .F property is the element relative to which we want the popover to be positioned. Also, without the blur event, the show command only works once.

24

@Anthony_Frehner why not support the Popover API? Seems like a widely supported, standards-compliant way of adding programmability.

25

Popover API is only usable with the anchor API, which is only available from Safari 26, and not yet on Firefox (popover API are forced to be on the top-layer, so you cannot positioned them absolutely; so any kind of non-trivial positioning requires the anchor API).

It seems a bit too early to base something critical like Shopify admin on this API. Usage of Safari 15 is still quite high. As much as I love this API, I don’t think the popover API will be usable for anything critical before at least 3-4 years (Apple unfortunately locked many devices on Safari 15 so we’re kinda stuck here).