I'm trying to select an input[type="file"]:invalid but it doesn't work on Safari. That's because Safari doesn't mark it as invalid when this FormElement value is reset to "" or null. Isolated preview: https://codepen.io/FelipePS/pen/OJvJmoK How to reproduce error: 1) On load, input is invalid (background-color light blue) because it's empty and required. 2) Add a file to it. It changes to valid as expected, assuming background-color light grey. 3) Click "Remove file" to reset the input. Expected behaviour: Upon clicking "Remove file", it should assume background-color light blue again, because it's now empty and it's a required field. Chrome 102 and Firefox 100 behave as expected. Current behaviour: Safari maintains the input field as valid (background-color light grey).
Found a simple workaround! call setCustomValidity(" ") with a non-empty string to manually make field invalid.
<rdar://problem/96446732>
To merge - https://src.chromium.org/viewvc/blink?view=revision&revision=165942 & https://src.chromium.org/viewvc/blink?view=revision&revision=166115
PR - https://github.com/WebKit/WebKit/pull/10349
Committed 260688@main (ea06eb38955a): <https://commits.webkit.org/260688@main> Reviewed commits have been landed. Closing PR #10349 and removing active labels.