search

umbraco / Umbraco.Marketplace.Issues

Public issue tracker for Umbraco Marketplace
2 stars 0 forks source link

Filter does not work in Safari browsers #38

Closed greystate closed 1 year ago

greystate commented 1 year ago

The filter's radiobuttons doesn't work (at all) in Safari - they can only be clicked "on" - and they do not have the expected "radio-button" behavior where only one is selected at any time.

It looks like it could be an underlying issue with the UUI controls (e.g. the Umbraco version "filter" on the left is completely missing) - although the controls in the UI Library work just fine in Safari.

The console throws a TypeError on pages where the filter appears:

TypeError: this.attachInternals is not a function. (In 'this.attachInternals()', 'this.attachInternals' is undefined)

Here's a video showing how the filter "works" in the latest Safari (v16.2 on macOS Ventura):

https://user-images.githubusercontent.com/5463/213400961-765b7934-56c1-4793-aa93-ab1d59152719.mp4

Please note that "Safari" also means Mobile Safari on iPhone:

https://user-images.githubusercontent.com/5463/213402805-8eb32f79-4fe3-44e2-af6c-caf48788e4c4.mp4

nathanwoulfe commented 1 year ago

Hey @greystate I think it must be time for me to petition HQ for a Mac 💻 I suspect this is similar to the previous Mac issue (#26), which was somehow magically fixed by a new build... I'll see what I can do sans-Mac.

nathanwoulfe commented 1 year ago

@nielslyngsoe possible this is related to a required polyfill for attachInternals? uui lib has comments re polyfilling, Safari appears to not have support for this method => https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals#specifications

nathanwoulfe commented 1 year ago

@greystate there's a (potential) fix for this on https://dev.marketplace.umbraco.com - not sure if it works or not, if you could verify I'd be grateful. Docs for the polyfill are pretty vague, but we'll see what happens...

Safari will be adding support for the Element Internals API soon(ish), it's added to the latest preview https://webkit.org/blog/13711/elementinternals-and-form-associated-custom-elements/

greystate commented 1 year ago

@nathanwoulfe Can confirm that it seems to be working 👍

✅ Checked both on a Mac and on an iPhone

nathanwoulfe commented 1 year ago

Awesome, glad to hear. It's released to live now too 🚀

nielslyngsoe commented 1 year ago

@nathanwoulfe seems like you figured out, sorry for replying this late.

To answer the question anyhow, we are using https://www.npmjs.com/package/element-internals-polyfill on the Cloud Portal.

We should update the UUI descriptions to make this clear, would be nice if you could make a PR for such.

Thanks in advance

nathanwoulfe commented 1 year ago

No worries @nielslyngsoe, I'll PR something.