← all categories

category

Forms & Input

Customizable <select>, popover, dialog, autofill event, focusgroup, interestfor, invoker commands, keyboard input.

65 of 66 demos built, across 23 releases.

Chrome 154 (1)

  1. Light dismiss improvements for popovers and dialogs

    Improves and simplifies the light dismiss behavior for popovers and dialogs to fix a few bugs. "Light dismiss" is the behavior where clicking outside of a popover or dialog closes it. The fixed bugs include making scroll...

Chrome 153 (1)

  1. SpeechRecognitionResult Timestamps (WebSpeech API)

    The Web Speech API currently does not expose the acoustic timing bounds of recognized speech segments, making it difficult to associate transcribed text with media timelines or generate synchronized subtitle cues. We pro...

Chrome 152 (3)

  1. Gamepad button type attribute

    Gamepad API defines standard indices for 17 common gamepad buttons. The GamepadButton type attribute provides an alternate, interoperable identifier for common buttons that are not included in the standard set, like "tra...

  2. OpaqueRange

    `OpaqueRange` represents a live span of text within a form control’s value, such as a `<textarea>` or text-based `<input>`, so developers can work with value text using range-like APIs. It enables operations such as `ge...

  3. Reference Target for Cross-root ARIA

    Reference Target enables ID attributes like <label for>, aria-labelledby, popovertarget, and commandfor to be forwarded to elements inside a component's shadow DOM, while maintaining the shadow's encapsulation of its int...

Chrome 151 (1)

  1. aria-actions

    Support aria-actions attribute. There is a common UI pattern where secondary actions are placed within composite interactive widgets. The aria-actions attribute allows us to expose these secondary action buttons direct...

Chrome 150 (3)

  1. Clone into all descendant selectedcontent elements

    Several small changes are being made to edge cases of the selectedcontent element: - When multiple selectedcontent elements are put in a select element at the same time, all of them will be kept up to date instead of onl...

  2. Popover=hint behavior changes

    This change implements a revised and simplified stacking model for the popover=hint attribute and its interactions with popover=auto. Previously, the interactions between these two types of popovers could be complex in s...

  3. Update text selection on mouseup before dispatching click event

    Currently Chromium applies the default action of a mouseup event (e.g. collapsing or committing a drag-selection in a text input) after the click event has already been dispatched. This violates developer expectations: a...

Chrome 149 (6)

  1. Android IME media insertion

    This feature allows IMEs to insert media content such as images, gifs and stickers into the Chrome Browser in Android.

  2. Gamepad Event-Driven Input API

    This proposal extends the Gamepad API with a new event-driven model that enables applications to receive gamepad input with lower latency. Instead of relying on frequent polling via navigator.getGamepads(), developers ca...

  3. Intl.Locale.prototype.variants

    Add Intl.Locale.prototype.variants as stated in https://tc39.es/ecma402/#sec-Intl.Locale.prototype.variants and also accept "variants" in option bag in Intl.Locale consturctor as in https://tc39.es/ecma402/#sec-updat...

  4. Permissions Policy: focus-without-user-activation

    Gives embedders control over programmatic focus from embedded content via the focus-without-user-activation permissions policy. When the policy is denied for a frame, programmatic focus calls (element.focus(), autofocus,...

  5. Popover=hint behavior changes

    This change implements a revised and simplified stacking model for the popover=hint attribute and its interactions with popover=auto. Previously, the interactions between these two types of popovers could be complex in s...

  6. Respect autocorrect="off" for Windows touch keyboard in TSF

    The HTML autocorrect attribute allows web authors to control whether autocorrection should be applied to user input in editable elements including <input>, <textarea>, and contenteditable hosts. On Windows, the touch key...

Chrome 148 (3)

  1. Extended lifetime shared workers

    This update adds a new option, `extendedLifetime: true`, to the `SharedWorker` constructor. This new option requests that the shared worker be kept alive even after all current clients have unloaded. This allows pages to...

  2. OpaqueRange

    `OpaqueRange` represents a live span of text within a form control’s value, such as a `<textarea>` or text-based `<input>`, so developers can work with value text using range-like APIs. It enables operations such as `ge...

  3. Pointer event suppression on drag start

    According to the HTML spec, when a drag starts the user agent should send the appropriate events to the drag source to indicate that the pointer event stream has ended, and that it shouldn't expect any more events from t...

Chrome 147 (2)

  1. Gamepad Event-Driven Input API

    This proposal extends the Gamepad API with a new event-driven model that enables applications to receive gamepad input with lower latency. Instead of relying on frequent polling via navigator.getGamepads(), developers ca...

  2. Timeline Named Range "scroll"

    This feature expands the set of named ranges of view timelines, adding a "scroll" range. The Scroll-Driven Animations API introduced ViewTimelines along with named ranges which refer to portions of a ViewTimeline that d...

Chrome 146 (1)

  1. Data URL MIME Type Parameter Preservation

    Preserve MIME type parameters (e.g., charset, boundary) in data URL Content-Type headers per the Fetch Standard. CL: https://chromium-review.googlesource.com/c/chromium/src/+/7135039

Chrome 145 (6)

  1. Add presentationTime/paintTime to performance entries

    Expose "paintTime" and "presentationTime" in element timing, LCP, long animation frames, and paint timing. "paintTime" means the time when the rendering phase ended and the browser started the paint phase. "presentation...

  2. Customizable select listbox

    This feature extends customizable select support to the listbox rendering mode, including single-select and multi-select in listbox mode. The listbox rendering mode means that the select element is rendered in-flow or i...

  3. Expose rtpTimestamp from WebRTC video frames via VideoFrame.metadata()

    Adds a VideoFrame.metadata() method that returns a dictionary containing the rtpTimestamp field, if the underlying VideoFrame has this field in its native metadata. An empty dictionary is returned otherwise. Only video f...

  4. Focus's focusVisible option

    When calling the `focus()` method, developers can supply a `focusVisible` boolean in the FocusOptions dictionary. When true, a focus ring will always be painted around the newly-focused element and it will match the `:fo...

  5. InputEvent types for deletion commands on non-collapsed selections

    Reports accurate inputType values for deletion keyboard shortcuts on selected text. When deletion commands like Ctrl+Backspace or Ctrl+Delete are used with selected text in contenteditable elements, the beforeinput and i...

  6. Light dismiss improvements for popovers and dialogs

    Improves and simplifies the light dismiss behavior for popovers and dialogs to fix a few bugs. "Light dismiss" is the behavior where clicking outside of a popover or dialog closes it. The fixed bugs include making scroll...

Chrome 144 (1)

  1. Pointer Lock on Android

    Provides access to raw mouse movement by locking the target of mouse events to a single element and hiding the mouse cursor.

Chrome 143 (4)

  1. DataTransfer property for insertFromPaste, insertFromDrop and insertReplacementText input events

    Populate the dataTransfer property on input events with inputType of insertFromPaste, insertFromDrop, and insertReplacementText to provide access to clipboard and drag-drop data during editing operations in contenteditab...

  2. EditContext: TextFormat underlineStyle and underlineThickness

    Chromium shipped https://developer.mozilla.org/en-US/docs/Web/API/EditContext with a bug where the https://developer.mozilla.org/en-US/docs/Web/API/TextFormat object supplied by the https://developer.mozilla.org/en-US/do...

  3. Gamepad ongamepadconnected and ongamepaddisconnected event handler attributes

    Add ongamepadconnected and ongamepaddisconnected event handlers to the WindowEventHandlers interface mixin. This would enable support for window.ongamepad[dis]connected or document.body.ongamepad[dis]connected event h...

  4. Restricting spelling and grammar highlights

    This experiment would change when spelling and grammar hints are applied to text fields to reduce the of websites ability to extract information about the user’s dictionary, specifically: * Hints would not be applied to...

Chrome 142 (4)

  1. Interest Invokers (the `interestfor` attribute)

    This feature adds an `interestfor` attribute to <button> and <a> elements. This attribute adds "interest" behaviors to the element, such that when the user "shows interest" in the element, actions are triggered on the ta...

  2. Interoperable pointerrawupdate events exposed only in secure contexts

    The PointerEvents spec restricted pointerrawupdate to secure contexts in 2020, hiding both the event firing and the global event listeners from insecure contexts. Through this feature, Chrome will match the updated spec...

  3. Mobile and desktop parity for select element rendering modes

    By using the size and multiple attributes, the select element can be rendered as an in-page listbox or a button with a popup. However, these modes are not consistently available across mobile and desktop chrome. Currentl...

  4. Stricter *+json MIME token validation for JSON modules

    Reject JSON module script responses whose MIME type’s type or subtype contains non‑HTTP token code points (e.g. spaces) when matched via *+json; aligns with MIME Sniffing spec and other engines. This change is part of th...

Chrome 141 (1)

  1. ARIA Notify API

    ariaNotify provides a JavaScript API that enables content authors to directly tell a screen reader what to read. ariaNotify improves reliability and developer control compared to ARIA live regions, allowing for announc...

Chrome 139 (3)

  1. 'request-close' Invoker Command

    Dialog elements can be closed through a variety of mechanisms, sometimes developers want to have the ability to prevent closure. To achieve this dialogs fire a cancel event. Originally this was only fired via a close req...

  2. Extended lifetime shared workers

    This update adds a new option, `extendedLifetime: true`, to the `SharedWorker` constructor. This new option requests that the shared worker be kept alive even after all current clients have unloaded. This allows pages to...

  3. Spec-compliant JSON MIME type detection

    Chromium now recognizes all valid JSON MIME types as defined by the WHATWG mimesniff specification. This includes any MIME type whose subtype ends with “+json”, in addition to the traditional application/json and text/js...

Chrome 138 (1)

  1. CSS env variable for OS-level font scale

    Exposes a user's preferred font scale to CSS. Currently, it is not practical for a page to detect if the user has changed their preferred font size via the Operating System's preferences. This CSS environment variable wi...

Chrome 137 (1)

  1. Selection API getComposedRanges and direction

    This feature ships two new API methods for the Selection API: * Selection.direction which returns the selection's direction as either "none", "forward" or "backward" * Selection.getComposedRanges() which returns a list o...

Chrome 136 (2)

  1. 'request-close' Invoker Command

    Dialog elements can be closed through a variety of mechanisms, sometimes developers want to have the ability to prevent closure. To achieve this dialogs fire a cancel event. Originally this was only fired via a close req...

  2. Dispatching click events to captured pointer

    If a pointer is captured while the `pointerup` event is being dispatched, the `click` event will be dispatched to the captured target instead of the nearest common ancestor of `pointerdown` and `pointerup` events as per ...

Chrome 135 (4)

  1. Interest Invokers (the `interestfor` attribute)

    This feature adds an `interestfor` attribute to <button> and <a> elements. This attribute adds "interest" behaviors to the element, such that when the user "shows interest" in the element, actions are triggered on the ta...

  2. Invoker Commands; the command and commandfor attributes

    Adding command and commandfor attributes to <button> elements would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript page...

  3. safe-area-max-inset-* variables

    In https://chromestatus.com/feature/5174306712322048 we've added dynamic safe area insets which can change as the user interacts with the device. This proposal amends the general safe area feature to add max-area-safe-in...

  4. Timestamps for RTC Encoded Frames

    This feature consists in exposing to the Web some timestamps that are present in WebRTC encoded frames transmitted via RTCPeerConnection. The timestamps in question are: -Capture timestamp: the timestamp when a frame w...

Chrome 134 (4)

  1. Customizable <select> Element

    Customizable <select> allows developers to take complete control of the rendering of <select> elements by adding the appearance:base-select CSS property. This feature relies on the SelectParserRelaxation flag, which cha...

  2. Dialog light dismiss

    One of the nice features of the Popover API is its light dismiss behavior. This chromestatus is about bringing that same capability to `<dialog>`. A new `closedby` attribute controls behavior: `<dialog closedby=none>`...

  3. Extend the console.timeStamp API to support measurements and and presentation options

    This feature extends the console.timeStamp() API, in a backwards-compatible manner, to provide a high-performance method for instrumenting applications and surfacing timing data to the Performance panel in DevTools. ...

  4. Select parser relaxation

    This change makes the HTML parser allow additional tags in <select> besides <option>, <optgroup>, and <hr>. This change is in support of the customizable <select> feature but is being shipped first because it can be don...

Chrome 133 (8)

  1. Dialog light dismiss

    One of the nice features of the Popover API is its light dismiss behavior. This chromestatus is about bringing that same capability to `<dialog>`. A new `closedby` attribute controls behavior: `<dialog closedby=none>`...

  2. Expose coarsened cross-origin renderTime in elment timing/LCP (regardless of TAO)

    All element-timing and LCP performance entries would have a non-zero renderTime, even if they are cross-origin without Timing-Allow-Origin. All presentation timestamps (renderTime, paint timing start time, event timing e...

  3. Fix mouse focus for slotted elements in Shadow DOM

    Currently, mouse-triggered event will traverse up to the parent or shadow host to find fallback element to receive mouse focus. This doesn't make sense for slotted content, where we expect the fallback element to receive...

  4. Fix text selection on Shadow DOM with delegatesFocus

    A shadow host with delegatesFocus set to true will delegate its focus to its first focusable child. On a mouse click event, the child will receive focus and the event will be marked as handled. No further event dispatch...

  5. Interest Invokers (the `interestfor` attribute)

    This feature adds an `interestfor` attribute to <button> and <a> elements. This attribute adds "interest" behaviors to the element, such that when the user "shows interest" in the element, actions are triggered on the ta...

  6. Popover nested inside invoker shouldn't re-invoke it

    In this case: ``` <button popovertarget=foo>Activate <div popover id=foo>Clicking me shouldn't close me</div> </button> ``` clicking the button properly activates the popover, however, clicking on the popover itself ...

  7. popover=hint

    The Popover API (https://chromestatus.com/feature/5463833265045504) specifies the behavior for two values of the `popover` attribute: `auto` and `manual`. This feature describes a third value, `popover=hint`. Hints, whic...

  8. Reference Target for Cross-root ARIA

    Reference Target enables ID attributes like <label for>, aria-labelledby, popovertarget, and commandfor to be forwarded to elements inside a component's shadow DOM, while maintaining the shadow's encapsulation of its int...

Chrome 132 (5)

  1. Dialog Toggle Events

    It is useful for web authors do determine when their <dialog> elements open and close. popover already has `ToggleEvent` which is dispatched when a popover opens or closes, but <dialog> does not. The current way to detec...

  2. Expose coarsened cross-origin renderTime in elment timing/LCP (regardless of TAO)

    All element-timing and LCP performance entries would have a non-zero renderTime, even if they are cross-origin without Timing-Allow-Origin. All presentation timestamps (renderTime, paint timing start time, event timing e...

  3. Fix Selection isCollapsed in Shadow DOM

    Selection isCollapsed should return true if and only if the anchor and focus are the same. This should be true whether the selection starts/ends inside a light or a shadow tree. Currently, the Chrome implementation re...

  4. Keyboard-focusable scroll containers

    Improves accessibility by making scroll containers focusable using sequential focus navigation. Today, the tab key doesn't focus scrollers unless tabIndex is explicitly set to 0 or more. By making scrollers focusable by...

  5. Throw exception for popovers/dialogs in non-active documents

    This is a corner case change that hopefully does not impact developers. Previously calling `showPopover()` or `showModal()` on a popover or dialog that resides within an inactive document would silently fail. I.e. no exc...

Chrome 131 (1)

  1. Dialog Toggle Events

    It is useful for web authors do determine when their <dialog> elements open and close. popover already has `ToggleEvent` which is dispatched when a popover opens or closes, but <dialog> does not. The current way to detec...