fix!: align how clear button works with combo box behavior #6100

DiegoCardoso · 2023-07-04T14:49:35Z

Description

Make the behavior of clicking the clear button to be aligned with how <vaadin-combo-box> works.

This change:

adds a touchstart listener that prevent default, and clears the input element, BUT does not focus it
adds a mousedown listener that prevents default, focuses the input element, AND clears it
keep a click listener that does the same mousedown behavior, mostly used for programmatic clicks on the button

These changes also fix the issue described in vaadin/flow-components#5137, since it prevents the focusout event and the editor won't close after clicking the clear button.

Fixes #4130
Part of vaadin/flow-components#5137

Type of change

Bugfix
Feature

Make the behavior of clicking the clear button to be align with how `vaadin-combo-box` works. This change: - adds a touchstart listener that prevenst default, clears the input element, BUT does not focus it - adds a mousedown listener that prevents default, focuses the input element, AND clears it - keep a click listener that does the same mousedown behavior, mostly used for programmatically clicks on the button

packages/field-base/src/clear-button-mixin.js

packages/field-base/test/input-control-mixin.test.js

packages/field-base/test/clear-button-mixin.test.js

Co-authored-by: Sergey Vinogradov <[email protected]>

packages/field-base/src/clear-button-mixin.js

Approved by accident

Co-authored-by: Sergey Vinogradov <[email protected]>

packages/field-base/test/clear-button-mixin.test.js

Co-authored-by: Sergey Vinogradov <[email protected]>

packages/field-base/test/clear-button-mixin.test.js

vursen

I manually tested text-field, date-picker, time-picker, combo-box on iOS and their clear button functionality now works consistently.

packages/field-base/test/clear-button-mixin.test.js

sonarcloud · 2023-07-06T12:17:10Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

vaadin-bot · 2023-07-07T07:22:50Z

Hi @DiegoCardoso , this commit cannot be picked to 24.0 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick b7823f9
error: could not apply b7823f9... fix!: align how clear button works with combo-box behavior (#6100)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

vaadin-bot · 2023-07-07T07:22:54Z

Hi @DiegoCardoso , this commit cannot be picked to 23.3 by this bot, can you take a look and pick it manually?
Error Message: Error: Command failed: git cherry-pick b7823f9
error: could not apply b7823f9... fix!: align how clear button works with combo-box behavior (#6100)
hint: After resolving the conflicts, mark them with
hint: "git add/rm ", then run
hint: "git cherry-pick --continue".
hint: You can instead skip this commit with "git cherry-pick --skip".
hint: To abort and get back to the state before "git cherry-pick",
hint: run "git cherry-pick --abort".

…6122) Co-authored-by: Diego Cardoso <[email protected]>

…P: 24.0) (#6123)

…P: 23.3) (#6127)

vaadin-bot · 2023-07-11T07:55:45Z

This ticket/PR has been released with Vaadin 24.2.0.alpha3 and is also targeting the upcoming stable 24.2.0 version.

DiegoCardoso added 2 commits July 4, 2023 17:43

test: add tests for mousedown and touchstart events on clear button

adc987d

DiegoCardoso requested review from vursen and web-padawan July 4, 2023 14:49

DiegoCardoso commented Jul 4, 2023

View reviewed changes

packages/field-base/src/clear-button-mixin.js Show resolved Hide resolved

DiegoCardoso mentioned this pull request Jul 4, 2023

test: check that clicking the clear button in a field won't close the editor #6097

Merged

2 tasks

vursen reviewed Jul 4, 2023

View reviewed changes

packages/field-base/src/clear-button-mixin.js Outdated Show resolved Hide resolved

web-padawan reviewed Jul 5, 2023

View reviewed changes

packages/field-base/test/input-control-mixin.test.js Outdated Show resolved Hide resolved

packages/field-base/test/input-control-mixin.test.js Outdated Show resolved Hide resolved

DiegoCardoso added 2 commits July 5, 2023 12:23

refactor: split the listeners

a23c17c

test: move tests

0ca0a94

vursen previously approved these changes Jul 5, 2023

View reviewed changes

packages/field-base/test/clear-button-mixin.test.js Outdated Show resolved Hide resolved

packages/field-base/test/clear-button-mixin.test.js Outdated Show resolved Hide resolved

Update packages/field-base/test/clear-button-mixin.test.js

96d9b2b

Co-authored-by: Sergey Vinogradov <[email protected]>

web-padawan reviewed Jul 5, 2023

View reviewed changes

packages/field-base/src/clear-button-mixin.js Outdated Show resolved Hide resolved

DiegoCardoso added 2 commits July 5, 2023 15:48

refator: remove call to preventDefault on touchend

4bb2ff8

test: add touchend call on test

6ddf640

vursen reviewed Jul 5, 2023

View reviewed changes

packages/field-base/src/clear-button-mixin.js Outdated Show resolved Hide resolved

DiegoCardoso and others added 4 commits July 5, 2023 17:01

Update packages/field-base/src/clear-button-mixin.js

2b2d81b

Co-authored-by: Sergey Vinogradov <[email protected]>

refactor: use isTouch and remove touchend listener

8221178

test: refactor test to detect touch device

b21fad5

test: fix test to detect isTouch

f7770bc

vursen reviewed Jul 6, 2023

View reviewed changes

packages/field-base/test/clear-button-mixin.test.js Outdated Show resolved Hide resolved

Update packages/field-base/test/clear-button-mixin.test.js

12b6488

Co-authored-by: Sergey Vinogradov <[email protected]>

vursen reviewed Jul 6, 2023

View reviewed changes

packages/field-base/test/clear-button-mixin.test.js Outdated Show resolved Hide resolved

test: remove duplicated test

64c3ca9

vursen approved these changes Jul 6, 2023

View reviewed changes

web-padawan reviewed Jul 6, 2023

View reviewed changes

packages/field-base/test/clear-button-mixin.test.js Outdated Show resolved Hide resolved

web-padawan reviewed Jul 6, 2023

View reviewed changes

packages/field-base/test/clear-button-mixin.test.js Outdated Show resolved Hide resolved

Update packages/field-base/test/clear-button-mixin.test.js

4baddef

web-padawan approved these changes Jul 6, 2023

View reviewed changes

web-padawan merged commit b7823f9 into main Jul 7, 2023

web-padawan deleted the fix/field-base/clear-button-mousedown branch July 7, 2023 06:33

DiegoCardoso added target/23.3 target/24.0 target/24.1 labels Jul 7, 2023

vaadin-bot pushed a commit that referenced this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100)

81511b6

vaadin-bot added cherry-picked-24.1 need to pick manually 24.0 labels Jul 7, 2023

vaadin-bot added the need to pick manually 23.3 label Jul 7, 2023

DiegoCardoso added a commit that referenced this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100)

5878ce1

DiegoCardoso mentioned this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100) (CP: 24.0) #6123

Merged

web-padawan pushed a commit that referenced this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100) (#…

eb0338e

…6122) Co-authored-by: Diego Cardoso <[email protected]>

DiegoCardoso added a commit that referenced this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100) (C…

4e85424

…P: 24.0) (#6123)

DiegoCardoso added a commit that referenced this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100)

ff0b561

DiegoCardoso mentioned this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100) (CP: 23.3) #6127

Merged

DiegoCardoso added a commit that referenced this pull request Jul 7, 2023

fix!: align how clear button works with combo-box behavior (#6100) (C…

0e57514

…P: 23.3) (#6127)

vaadin-bot added prerelease version for Vaadin 24.2.0 Released with Vaadin 24.2.0.alpha3 labels Jul 11, 2023

web-padawan mentioned this pull request Sep 5, 2024

:active pseudo-class cannot be styled on buttons-like divs inside vaadin-text-field #7769

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix!: align how clear button works with combo box behavior #6100

fix!: align how clear button works with combo box behavior #6100

DiegoCardoso commented Jul 4, 2023 •

edited by vursen

Loading

vursen left a comment •

edited

Loading

sonarcloud bot commented Jul 6, 2023

vaadin-bot commented Jul 7, 2023

vaadin-bot commented Jul 7, 2023

vaadin-bot commented Jul 11, 2023

fix!: align how clear button works with combo box behavior #6100

fix!: align how clear button works with combo box behavior #6100

Conversation

DiegoCardoso commented Jul 4, 2023 • edited by vursen Loading

Description

Type of change

vursen left a comment • edited Loading

Choose a reason for hiding this comment

sonarcloud bot commented Jul 6, 2023

vaadin-bot commented Jul 7, 2023

vaadin-bot commented Jul 7, 2023

vaadin-bot commented Jul 11, 2023

DiegoCardoso commented Jul 4, 2023 •

edited by vursen

Loading

vursen left a comment •

edited

Loading