Skip to content

[web] Detect scrollable semantics nodes more reliably #164491

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Mar 6, 2025

Conversation

mdebbar
Copy link
Contributor

@mdebbar mdebbar commented Mar 3, 2025

When a text field is inside a scrollable, and the virtual keyboard shows up, it (sometimes) makes the scrollable semantics node have a 0 extent. In that case, the scrollable node has no scroll actions attached. In the web engine, we detect that as a change of roles (from scrollable to generic) which causes a DOM mutation above the text field, so the browser shifts focus to the <body>.

In order to avoid this bug, this PR changes how we detect a scrollable node by checking for the hasImplicitScrolling flag.

Fixes #154741

@mdebbar mdebbar requested review from yjbanov and chunhtai March 3, 2025 17:14
@github-actions github-actions bot added engine flutter/engine repository. See also e: labels. a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) f: scrolling Viewports, list views, slivers, etc. platform-web Web applications specifically labels Mar 3, 2025
assert(semanticsObject.isHorizontalScrollContainer);
element.style.overflowX = 'hidden';
}
element.style.overflow = 'hidden';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When gesture mode flips from browser to pointer events, this will result in overflowY == 'scroll' and overflow == 'hidden'. Is that a good state to be in?

The vice versa situation (flipping back to browser gesture mode) seems equally questionable.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tried in a jsfiddle, the following:

element.style.overflow = 'hidden';
element.style.overflowY = 'scroll';

it results in the element having overflowY: scroll and overflowX: hidden.

But in order to avoid this whole situation, we can just always do:

element.style.removeProperty('overflow');

whenever the gesture mode is changed. WDYT?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In that case, I think when we're setting overflow we should remove overflowX/Y?

@@ -1051,7 +1051,7 @@ abstract class SemanticsUpdateBuilder {
///
/// For scrollable nodes `scrollPosition` describes the current scroll
/// position in logical pixel. `scrollExtentMax` and `scrollExtentMin`
/// describe the maximum and minimum in-rage values that `scrollPosition` can
/// describe the maximum and minimum in-range values that `scrollPosition` can
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lol, nice catch

/// to check for scrollability.
bool get isScrollContainer =>
hasFlag(ui.SemanticsFlag.hasImplicitScrolling) ||
isVerticalScrollContainer ||
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I will expect if either isVerticalScrollContainer or isHorizontalScrollContainer is true, the hasImplicitScrolling must also be true. so I think we can just check hasImplicitScrolling should be enough

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done!

@mdebbar mdebbar requested review from yjbanov and chunhtai March 4, 2025 21:03
Copy link
Contributor

@yjbanov yjbanov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm

Copy link
Contributor

@chunhtai chunhtai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@mdebbar mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Mar 5, 2025
@auto-submit auto-submit bot added this pull request to the merge queue Mar 6, 2025
Merged via the queue into flutter:master with commit d778ed2 Mar 6, 2025
176 checks passed
@flutter-dashboard flutter-dashboard bot removed the autosubmit Merge PR when tree becomes green via auto submit App label Mar 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025
engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 6, 2025
auto-submit bot pushed a commit to flutter/packages that referenced this pull request Mar 6, 2025
flutter/flutter@2578d97...321fbc0

2025-03-06 [email protected] Roll Skia from fefecd49e03a to ccd8cc23aa94 (1 revision) (flutter/flutter#164712)
2025-03-06 [email protected] [web] Detect scrollable semantics nodes more reliably (flutter/flutter#164491)
2025-03-06 [email protected] [windows] wire the focus request and the focus events through the Windows platform (flutter/flutter#164296)
2025-03-06 [email protected] Roll Skia from 02897747c7d5 to fefecd49e03a (1 revision) (flutter/flutter#164701)
2025-03-06 [email protected] Roll Skia from e315b0ab7c84 to 02897747c7d5 (1 revision) (flutter/flutter#164677)
2025-03-06 [email protected] Roll Skia from 0c3880f94970 to e315b0ab7c84 (1 revision) (flutter/flutter#164669)
2025-03-06 [email protected] [Impeller] use device private on non-iOS devices. (flutter/flutter#164601)
2025-03-05 [email protected] Roll Skia from 43294a662fd0 to 0c3880f94970 (1 revision) (flutter/flutter#164661)
2025-03-05 [email protected] Add a workflow (only triggered from rest events) for hasing experiment (flutter/flutter#164657)
2025-03-05 [email protected] Roll Skia from 4cf9f0b77d41 to 43294a662fd0 (4 revisions) (flutter/flutter#164649)
2025-03-05 [email protected] Adds animateToItem to the CarouselController (flutter/flutter#162694)
2025-03-05 [email protected] Cleanup content context (flutter/flutter#164229)
2025-03-05 [email protected] Fix: Update CupertinoSheetRoute transition rounded corner (flutter/flutter#163700)
2025-03-05 [email protected] [Impeller] fix macOS managed memory. (flutter/flutter#164635)
2025-03-05 [email protected] [skwasm] Clear font collection cache when font is loaded manually. (flutter/flutter#164588)
2025-03-05 [email protected] Fix race condition causing crash when interacting with an animating scrollable (flutter/flutter#164392)
2025-03-05 [email protected] Use dwds 24.3.6 and pass uri for the reload scripts path to FrontendServerDdcLibraryBundleProvider (flutter/flutter#164582)
2025-03-05 [email protected] Roll Packages from 9e4684e to abba683 (8 revisions) (flutter/flutter#164630)
2025-03-05 [email protected] Roll Skia from 7e4323f72c9d to 4cf9f0b77d41 (1 revision) (flutter/flutter#164622)
2025-03-05 [email protected] Fix to Linux_pixel_7pro integration_ui_keyboard_resize test flakiness (flutter/flutter#162308)
2025-03-05 [email protected] Roll Skia from 03a3f653d64e to 7e4323f72c9d (1 revision) (flutter/flutter#164599)
2025-03-05 [email protected] Implement `clipPath` Mutator for hcpp (flutter/flutter#164525)
2025-03-05 98614782+auto-submit[bot]@users.noreply.github.com Reverts "[Impeller] use DeviceLocal textures for gifs on non-iOS devices. (#164573)" (flutter/flutter#164600)
2025-03-05 [email protected] [macos] prefer integrated GPU. (flutter/flutter#164569)
2025-03-05 [email protected] Enforce minSdk constraint for Android Flutter (flutter/flutter#164251)
2025-03-05 [email protected] Add `clipRSuperellipse`, and use them for dialogs (flutter/flutter#161111)
2025-03-05 [email protected] Roll Skia from 46705a22edc3 to 03a3f653d64e (1 revision) (flutter/flutter#164590)
2025-03-05 [email protected] when resetting FlutterPlatformViewsController, clear out some additional internal state to prevent it from carrying over across a Hot Restart (flutter/flutter#164456)
2025-03-05 [email protected] Roll Fuchsia Linux SDK from Rt6pxGFLVAJHduM0V... to fhm5z889sA5T1AQao... (flutter/flutter#164583)

If this roll has caused a breakage, revert this CL and stop the roller
using the controls here:
https://autoroll.skia.org/r/flutter-packages
Please CC [email protected],[email protected] on the revert to ensure that a human
is aware of the problem.

To file a bug in Packages: https://github.com/flutter/flutter/issues/new/choose

To report a problem with the AutoRoller itself, please file a bug:
https://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
@mdebbar mdebbar deleted the text_field_focus branch March 10, 2025 15:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) engine flutter/engine repository. See also e: labels. f: scrolling Viewports, list views, slivers, etc. platform-web Web applications specifically
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Web] - Broken TextField in Semantics mode when using ListView and Scaffold’s AppBar on mobile browsers
3 participants