Skip to content

GitLab

T
tangled
Commit 1463620f authored by Sanket Joshi's avatar Sanket Joshi Committed by Commit Bot
Browse files
Options

Color Picker: Reset channel value container to last valid value on blur 

The manual color picker allows users to select colors by manually
entering color values in the RGB, HSL or HEX formats. If a user enters
an invalid value, the value will be entered into the channel value
container but will not be committed. While this behavior is reasonable,
the problem is that user's invalid value continues to be reflected
until they either choose a different color or close and re-open the
popup. This change addresses this by resetting channel value containers
to their last valid value whenever the container is blurred.

Bug: 1021234
Change-Id: I4481f02d3a86d1c582bc87481743e96ae5aa6c52
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1906118
Commit-Queue: Sanket Joshi <sajos@microsoft.com>
Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Cr-Commit-Position: refs/heads/master@{#714105}
parent 2579ce89
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 0 deletions
third_party/blink/renderer/core/html/forms/resources/color_picker.js
View file @ 1463620f
......@@ -1585,6 +1585,7 @@ class ChannelValueContainer extends HTMLInputElement {
this.setValue(initialColor);
this.addEventListener('input', this.onValueChange_);
this.addEventListener('blur', this.onBlur_);
}
get channelValue() {
......@@ -1680,6 +1681,31 @@ class ChannelValueContainer extends HTMLInputElement {
}
}
}
onBlur_ = () => {
switch (this.colorChannel_) {
case ColorChannel.HEX:
if (this.channelValue_ !== Number(this.value.substr(1))) {
this.value = '#' + this.channelValue_;
}
break;
case ColorChannel.R:
case ColorChannel.G:
case ColorChannel.B:
case ColorChannel.H:
if (this.channelValue_ !== Number(this.value)) {
this.value = this.channelValue_;
}
break;
case ColorChannel.S:
case ColorChannel.L:
if (this.channelValue_ !==
Number(this.value.substring(0, this.value.length - 1))) {
this.value = this.channelValue_ + '%';
}
break;
}
}
}
window.customElements.define(
'channel-value-container', ChannelValueContainer, {extends: 'input'});
......
third_party/blink/web_tests/virtual/controls-refresh/color/color-picker-manual-color-change-invalid-values.html 0 → 100644
View file @ 1463620f
<!DOCTYPE html>
<html>
<head>
<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>
<script src='../../../fast/forms/resources/picker-common.js'></script>
</head>
<body>
<input type='color' id='color' value='#AD4883'>
<script>
'use strict';
let t = async_test('Color picker: Manually entering an invalid value should not change the selected color.');
t.step(() => {
let colorControl = document.getElementById('color');
openPicker(colorControl, t.step_func_done(() => {
popupWindow.focus();
const popupDocument = popupWindow.document;
const gValueContainer = popupDocument.getElementById('gValueContainer');
assert_equals(gValueContainer.value, '72');
const gValueContainerRect = gValueContainer.getBoundingClientRect();
eventSender.mouseMoveTo(gValueContainerRect.left + 1, gValueContainerRect.top);
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.keyDown('3');
assert_equals(gValueContainer.value, '372');
eventSender.keyDown('Tab');
assert_equals(gValueContainer.value, '72', 'Invalid value should be reset when the value container is blurred.');
const formatToggler = popupDocument.querySelector('format-toggler');
formatToggler.click();
const sValueContainer = popupDocument.getElementById('sValueContainer');
assert_equals(sValueContainer.value, '41%');
const sValueContainerRect = sValueContainer.getBoundingClientRect();
eventSender.mouseMoveTo(sValueContainerRect.right - 1, sValueContainerRect.top + (sValueContainerRect.height / 2));
eventSender.mouseDown();
eventSender.mouseUp();
eventSender.keyDown('Backspace');
assert_equals(sValueContainer.value, '41');
eventSender.keyDown('Tab');
assert_equals(sValueContainer.value, '41%', 'Invalid value should be reset when the value container is blurred.');
formatToggler.click();
const hexValueContainer = popupDocument.getElementById('hexValueContainer');
assert_equals(hexValueContainer.value, '#ad4883');
const hexValueContainerRect = hexValueContainer.getBoundingClientRect();
eventSender.mouseMoveTo(hexValueContainerRect.right - 1, hexValueContainerRect.top + (hexValueContainerRect.height / 2));
eventSender.mouseDown();
eventSender.mouseUp();
const hexValueContainerLength = hexValueContainer.value.length;
for (let i = 0; i < hexValueContainerLength; i++) {
eventSender.keyDown('Backspace');
}
assert_equals(hexValueContainer.value, '');
eventSender.keyDown('Tab');
assert_equals(hexValueContainer.value, '#00000a', 'Invalid value should be reset when the value container is blurred.');
}), t.step_func_done(() => {
assert_false(internals.runtimeFlags.formControlsRefreshEnabled, "Popup should only not open when the formControlsRefresh flag is disabled.");
}));
});
</script>
</body>
</html>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment