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)
- Missing IDL definition for `parseHTMLUnsafe` HOT 2
- User interacted flag isn't always set on interactive submission HOT 5
- Render-blocking a defer script or non-async module script HOT 1
- Script element document conformance requirements on attributes are incomplete and confusing HOT 2
- Dark mode of HTML Spec does not render dark backgrounds for some dl elements HOT 1
- Proposal: Implement new method for parsing markup from `Fetch` responses HOT 4
- Allowing UA to do <source> selection for media element HOT 24
- Ergonomic way to move data between workers HOT 9
- img sizes="auto" skewing images using object-fit: contain HOT 21
- Ability to disable images loading, to customise when they load with scripting HOT 1
- Three-valued Button state (type=three-valued) of the type attribute of the input element HOT 3
- Three-valued Button state (type=three-valued) of the type attribute of the input element
- Labeled control when moving the mouse around is inconsistent accross UAs HOT 1
- Should showPicker() consume user activation? HOT 5
- navigationType in apply the history step used without a null check HOT 1
- Scrolling when near the edge of the viewport while dragging HOT 3
- Ability to configure whether script elements should execute for setHTMLUnsafe()
- `html` end tag omission HOT 3
- Navigation: Clarification on `ever populated` flag of DocumentState during apply the history step HOT 3
- Upcoming WHATNOT meeting on 2/8/2024 HOT 2
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.