md-radio not working on iOS browsers (Safari < 16.4 & Chrome ) with ElementInternals polyfill

[kkachniarz220]

What is affected?

Component

Description

Radio component is not visible on iOS 15.8.2 (Safari & Chrome browsers). In console I`m getting an error:

As mentioned in HTML Standard:

If flags contains one or more true values and message is not given or is the empty string, then throw a TypeError.

Reproduction

https://lit.dev/playground/#project=W3sibmFtZSI6Im1hdGVyaWFsLWltcG9ydHMuanMiLCJjb250ZW50IjoiaW1wb3J0IFwiQG1hdGVyaWFsL3dlYi9yYWRpby9yYWRpby5qc1wiOyJ9LHsibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCIuL21hdGVyaWFsLWltcG9ydHMuanNcIj48L3NjcmlwdD5cblxuPG1kLXJhZGlvPjwvbWQtcmFkaW8-XG4ifSx7Im5hbWUiOiJwYWNrYWdlLmpzb24iLCJjb250ZW50Ijoie1xuICBcImRlcGVuZGVuY2llc1wiOiB7XG4gICAgXCJsaXRcIjogXCJeMi4wLjBcIixcbiAgICBcIkBsaXQvcmVhY3RpdmUtZWxlbWVudFwiOiBcIl4xLjAuMFwiLFxuICAgIFwibGl0LWVsZW1lbnRcIjogXCJeMy4wLjBcIixcbiAgICBcImxpdC1odG1sXCI6IFwiXjIuMC4wXCJcbiAgfVxufSIsImhpZGRlbiI6dHJ1ZX1d

Workaround

I have not found a workaround.

Is this a regression?

Yes. This used to work, but now it doesn't.

Affected versions

1.4.1

Browser/OS/Node environment

Browser: Safari 15.8.2
OS: iOS 15.7.2
ElementInternals polyfill version: 1.3.11 (latest)

[christophe-g]

The lit.dev repro does not seem to be related with the issue ; )

[kkachniarz220]

Thanks @christophe-g, fixed :)

[asyncLiz]

Moving to a discussion for more chatting since we don't officially support Safari before 16.4.

One thing I noticed in the polyfill's code is this check in its validity state functions

export const isValid = (validityState: Partial<ValidityState>): boolean => {
  let valid = true;
  for (let key in validityState) {
    if (key !== 'valid' && /* Here -> */validityState[key] !== false) {
      valid = false;
    }
  }
  return valid;
};

I think validityState[key] !== false may be causing a false positive if a key is undefined from the Partial<ValidityState>. Are you able to debug to that statement in your code and check if that's the reason why it's failing?

If flags contains one or more true values and message is not given or is the empty string, then throw a TypeError.

Reading the spec, I think the code should be checking for explicit true values instead of a strictly not false values (which includes null and undefined).

[christophe-g]

There is a PR here : calebdwilliams/element-internals-polyfill#131

This other one might be useful as well on webkit: calebdwilliams/element-internals-polyfill#130