Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

Fix unexpected ViewFocus events when Text Editing utilities change focus in the middle of a blur call. #54965

Merged
merged 2 commits into from
Sep 5, 2024
Merged

Fix unexpected ViewFocus events when Text Editing utilities change focus in the middle of a blur call. #54965

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7afe406
focusout works when focus changes in a blur call.
tugorez Sep 5, 2024
192bdb4
Update lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_bindi…
tugorez Sep 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions lib/web_ui/lib/src/engine/dom.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,10 @@ extension DomHTMLDocumentExtension on DomHTMLDocument {
@JS('visibilityState')
external JSString get _visibilityState;
String get visibilityState => _visibilityState.toDart;

@JS('hasFocus')
external JSBoolean _hasFocus();
bool hasFocus() => _hasFocus().toDart;
}

@JS('document')
Expand Down
10 changes: 10 additions & 0 deletions lib/web_ui/lib/src/engine/platform_dispatcher/view_focus_binding.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,16 @@ final class ViewFocusBinding {
});

late final DomEventListener _handleFocusout = createDomEventListener((DomEvent event) {
// During focusout processing, activeElement typically points to <body />.
// However, if an element is focused during a blur event, activeElement points to that focused element.
// We leverage this behavior to ignore focusout events where the document has focus but activeElement is not <body />.
//
// Refer to https://github.com/flutter/engine/pull/54965 for more info.
final bool wasFocusInvoked = domDocument.hasFocus() && domDocument.activeElement != domDocument.body;
if (wasFocusInvoked) {
return;
}

event as DomFocusEvent;
_handleFocusChange(event.relatedTarget as DomElement?);
});
Expand Down
24 changes: 24 additions & 0 deletions lib/web_ui/test/engine/platform_dispatcher/view_focus_binding_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,30 @@ void testMain() {
expect(dispatchedViewFocusEvents[0].state, ui.ViewFocusState.focused);
expect(dispatchedViewFocusEvents[0].direction, ui.ViewFocusDirection.forward);
});

test('works even if focus is changed in the middle of a blur call', () {
final DomElement input1 = createDomElement('input');
final DomElement input2 = createDomElement('input');
final EngineFlutterView view = createAndRegisterView(dispatcher);
final DomEventListener focusInput1Listener = createDomEventListener((DomEvent event) {
input1.focusWithoutScroll();
});

view.dom.rootElement.append(input1);
view.dom.rootElement.append(input2);

input1.addEventListener('blur', focusInput1Listener);
input1.focusWithoutScroll();
// The event handler above should move the focus back to input1.
input2.focusWithoutScroll();
input1.removeEventListener('blur', focusInput1Listener);

expect(dispatchedViewFocusEvents, hasLength(1));

expect(dispatchedViewFocusEvents[0].viewId, view.viewId);
expect(dispatchedViewFocusEvents[0].state, ui.ViewFocusState.focused);
expect(dispatchedViewFocusEvents[0].direction, ui.ViewFocusDirection.forward);
});
});
}

Expand Down