Comments (5)
I just realized that's a bit tricky if you want https://github.com/web-platform-tests/wpt/blob/a41c93e155a26abe762bf93b9267b8ff4a7c1c5e/css/selectors/user-invalid.html#L45-L49 to keep working... Maybe should be tied to the value dirty flag, instead of something more complex?
from html.
Yeah I wrote that test and implemented the change in chromium here: https://chromium-review.googlesource.com/c/chromium/src/+/4966771
The gist of it is that as soon as the user types anything into any of the supported elements we set a flag saying that the user has interacted with it, and when the element is blurred, we start matching :user-valid/:user-invalid.
This is kind of an alternative to using the change event as a signal to start matching :user-valid/:user-invalid, because if the user types something in and then erases it and then blurs we don't fire a change event but start matching :user-valid/:user-invalid.
I think the current spec just sets user interacted to true when the change event is fired, right? Perhaps it would need to be set somewhere else that gets run any time the user types anything...?
from html.
Yeah, the "user interacted" flag in the spec is just broken atm. It doesn't seem to have anything to do with user interaction.
from html.
We just discussed looking at trusted input events before blurring rather than looking for a change event. In chromium, this is how we currently determine whether the input is dirty for :user-valid/:user-invalid: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/forms/text_control_element.cc;l=131-137;drc=67d90538f11c6b232dbfd716075db52aeb34fd15
It gets set when a webkit-editable-content-changed
event is fired except in the scope of a call to document.execCommand()
. I presume it would be the same to look for trusted input
events.
And of course, we don't start matching :user-valid/:user-invalid until the input is "dirty" according to this definition and the input is then blurred. This is tracked in chromium via this state machine: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/html/forms/html_form_control_element_with_state.h;l=80-101;drc=8036f183da3dfc0fe8e873e61f40a147f4373edd
from html.
Also I wrote a test for script setting value but I may have forgotten to blur the element after assigning from script so the test may need fixing: web-platform-tests/wpt#43058
from html.
Related Issues (20)
- Proposal: CSS reading-flow HOT 13
- Upcoming WHATNOT meeting on 6/20/2024 HOT 6
- video networkState and currentSrc after load() with no source HOT 1
- Range search for localstorage and session storage HOT 7
- Status of `onbeforeinput` event handler attribute HOT 1
- window.close() incorrectly refers to incumbent global object's node navigable HOT 2
- Warning for probably-buggy WebIDL conversions? HOT 3
- Upcoming WHATNOT meeting on 6/27/2024 HOT 2
- Allow for named base URLs so that relative links can be used for multiple websites or subsites
- RawJSON objects should be structured serializable/deserializable HOT 3
- Structured serialization does not allow [[PrivateElements]] or any other ES-internal internal slots HOT 2
- Improving Enumerated Attributes in the HTML Standard HOT 1
- Add AbortSignal for popover.showPopover() for initialize internal CloseWatcher HOT 7
- DOMString and USVString are not linked in IDL
- Should clicking a label contained in a button with popovertarget toggle the popover?
- TC39 AsyncContext Integration HOT 1
- fragment parsing algorithm steps take DocumentFragment but it's never used HOT 1
- Should popovertarget work on a reset button / input in a form? HOT 4
- should default reset/submit button text and default summary text use node's language rather than being locale-specific? HOT 1
- move style changes for opening/closing details into UA sheet rather than being style attribute manipulation
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html.