Blur listener not triggering on clear icon tap using iPad

[Sudokuz]

Description

I'm experiencing a weird behaviour in Vaadin 24.8.6 while emulating an iPad with touch simulation enabled on both Chrome and Firefox. Also reproduced on an actual iPad using Firefox.
I noticed that when clicking a clear button (of a Textfield or ComboBox), the blur listener of the component I'm currently focusing does not trigger (which can be a Textfield, ComboBox but also a Button).
This is particularly problematic for more complex scenarios:
when the focused button is part of a grid row and the Textfield is used to filter said grid, if I filter something by writing in the Textfield, click on a grid row button and then clear the grid filter by tapping on the Textfield's X icon, the grid row button's blur listener does not trigger, and never will because meanwhile the Textfield filter made the grid rows refresh so grid row buttons and blur listeners are re-rendered

Expected outcome

The blur listener should trigger regardless because I'm blurring away from the component

Minimal reproducible example

TextField tf1 = new TextField();
TextField tf2 = new TextField();

tf1.setClearButtonVisible(true);
tf2.setClearButtonVisible(true);

tf1.addBlurListener(ev -> Notification.show("BLUR ONE"));
tf2.addBlurListener(ev -> Notification.show("BLUR TWO"));
add(tf1, tf2);

Steps to reproduce

1. Write something in a Textfield
2. Focus the other Textfield (blur notification should appear)
3. Tap on the X clear icon of the first Textfield where something was written
4. Notice how blur notification for the secondo Textfield does not appear

Environment

Vaadin version(s): 24.8.6
Reproduced using Windows in both Chrome and Firefox (when emulating an iPad with touch-screen simulation enabled) and in an actual iPad using latest iOS and Firefox

Browsers

Chrome, Firefox

[TatuLund]

This seems to be a known issue in Safari / iOS

https://bugs.webkit.org/show_bug.cgi?id=22261

The likely workaround would be to add click listener when Safari / iOS is detected and in click event do programmatic focus.

[Sudokuz]

Tatu,
the linked issue reads: "Clicking on a non-text input element does not give it focus". I believe there are some differences with what I've reported:

first, I encountered this behaviour for both Chrome and Firefox (I did not try Safari), although while simulating iOS and with touch-simulation enabled (so I don't know if we're taking into account the difference between clicking and tapping).

Then, executing the provided example I can correctly assess the components gaining focus (you can switch the blur listener to focus listeners to verify this). It is the blur event that is not triggering when I click on another Textfield's clear icon

Lastly, in the provided example code both components are Textfields, so text input. Although the same weird behaviour of blur listeners not triggering does happen using buttons too, as long as you have another TextField with a clear icon to touch.

I probably should add that the only time when I find that the blur event is not happening when it should, is when tapping on a clear icon of a TextField (represented with an X) while something else has focus. If I tap inside the TextFields, instead of tapping the X icon, the blur events trigger normally.

[web-padawan]

This is (kind of) intended and related to mousedown event prevention logic here:

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

Lines 73 to 77 in c199fe1

	_onClearButtonMouseDown(event) {
	event.preventDefault();
	if (!isTouch) {
	this.inputElement.focus();
	}

The idea behind this code is to ensure focus doesn't get lost from <input> element on clear button click.
We probably could consider not calling preventDefault() if focus is somewhere else (e.g. in other field).

If we change it this way, clicking clear button while another text-field has focus will cause blur event as expected.
But since we don't focus on clear button click in mobile, then focus will likely get lost which is questionable.

[jouni]

But since we don't focus on clear button click in mobile, then focus will likely get lost which is questionable.

If we also preventDefault() only if focus is on the same input element, then focus shouldn't get lost, right? We should then focus the corresponding input element, whose clear button was pressed.

Something like this:

if (document.activeElement === this.inputElement) {
  event.preventDefault();
} else if (!isTouch) { 
  this.inputElement.focus(); 
} 
  

[web-padawan]

Yes, that sounds legit to me. We can use isElementFocused() helper which checks activeElement on the closest root.

[jouni]

Actually, is the other if-branch even needed? If focus is already on the input, and we prevent focusing the clear button, do we need to call focus() on the input?

[yuriy-fix]

Regarding the second part of the re-rendering of the Button's within Grid in your use-case please refer to the componentUpdateFunction: vaadin/flow-components#3901 (comment) which might help in this case.

[yuriy-fix]

@web-padawan , could you please check if suggested approach by @jouni is not causing issues?

[web-padawan]

Tested the approach suggested above, both in Chrome touch device mode and iOS Simulator:

Before

Clicking the clear button on another field leaves focus where it was, no blur / focus event fired:

chrome-before.mp4

After

Clicking the clear button on another field makes focus leave the field, blur event is fired:

chrome-after.mp4

Possible issues

One example that immediately comes to mind is vaadin-date-picker-overlay-content focus:

• Before: clicking clear button keeps focus where it was
• After: clicking clear button makes focus leave the overlay

This could be fixed by introducing some method like _shouldPreventClearButtonMouseDown() that would use isElementFocused(this.inputElement) by default and then overriding it specifically in vaadin-date-picker.

[web-padawan]

Prototype branch: https://github.com/vaadin/web-components/compare/refactor/clear-button-mousedown-mobile