Giter Club home page Giter Club logo

Comments (5)

emilio avatar emilio commented on June 27, 2024

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.

josepharhar avatar josepharhar commented on June 27, 2024

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.

smaug---- avatar smaug---- commented on June 27, 2024

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.

josepharhar avatar josepharhar commented on June 27, 2024

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.

josepharhar avatar josepharhar commented on June 27, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.