[web] IgnorePointer or AbsorbPointer doesn't work with HtmlElementView on DomCanvas

Question

[web] IgnorePointer or AbsorbPointer doesn't work with HtmlElementView on DomCanvas

simon-the-shark opened this issue 3 years ago · 11 comments

simon-the-shark commented 3 years ago

Steps to Reproduce

When we use HtmlElementView, it always captures mouse events. Even when placed below IgnorePointer, AbsorbPointer, ModalBarrier, in Stack below Container. The experience is especially terrible when AlertDialog is showed over the screen and any interactions with it, are also captured by the HtmlElementView.

Expected results: HtmlElementView behaves like any other widget

Actual results: It ignores any ignoring effects and always responds to mouse events

Answer 1 · 2020-12-14T13:44:18.000Z

λ flutter doctor -v

[√] Flutter (Channel master, 1.24.0-8.0.pre.252, on Microsoft Windows [Version 10.0.18362.1139], locale pl-PL)
    • Flutter version 1.24.0-8.0.pre.252 at C:\flutter
    • Framework revision bf2c9dfc05 (4 weeks ago), 2020-11-14 22:38:02 -0500
    • Engine revision 3e77d854a7
    • Dart version 2.12.0 (build 2.12.0-45.0.dev)

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at C:\Users\Fujitsu\AppData\Local\Android\sdk
    • Platform android-30, build-tools 29.0.2
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.6)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 46.0.1
    • Dart plugin version 192.8052
    • Java version OpenJDK Runtime Environment (build 1.8.0_212-release-1586-b04)

[√] IntelliJ IDEA Ultimate Edition (version 2019.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2019.1.3
    • Flutter plugin version 39.0.3
    • Dart plugin version 191.8593

[√] VS Code (version 1.52.0)
    • VS Code at C:\Users\Fujitsu\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.17.0

[√] Connected device (3 available)
    • Web Server (web) • web-server • web-javascript • Flutter Tools
    • Chrome (web)     • chrome     • web-javascript • Google Chrome 87.0.4280.88
    • Edge (web)       • edge       • web-javascript • Microsoft Edge 87.0.664.57

• No issues found!

Answer 2 · 2020-12-14T14:38:00.000Z

Hi @simon-the-shark
Can you please provide your flutter run -d chrome --verbose and a complete reproducible minimal code sample
Thank you

Answer 3 · 2020-12-14T22:30:20.000Z

flutter run -d chrome --verbose

logs

[ +122 ms] executing: [C:\flutter/] git -c log.showSignature=false log -n 1 --pretty=format:%H
[ +185 ms] Exit code 0 from: git -c log.showSignature=false log -n 1 --pretty=format:%H
[   +2 ms] 63062a64432cce03315d6b5196fda7912866eb37
[   +1 ms] executing: [C:\flutter/] git tag --points-at 63062a64432cce03315d6b5196fda7912866eb37
[ +222 ms] Exit code 0 from: git tag --points-at 63062a64432cce03315d6b5196fda7912866eb37
[   +4 ms] executing: [C:\flutter/] git describe --match *.*.* --long --tags 63062a64432cce03315d6b5196fda7912866eb37
[ +343 ms] Exit code 0 from: git describe --match *.*.* --long --tags 63062a64432cce03315d6b5196fda7912866eb37
[   +1 ms] 1.25.0-8.0.pre-43-g63062a6443
[  +62 ms] executing: [C:\flutter/] git rev-parse --abbrev-ref --symbolic @{u}
[ +110 ms] Exit code 0 from: git rev-parse --abbrev-ref --symbolic @{u}
[   +1 ms] origin/master
[        ] executing: [C:\flutter/] git ls-remote --get-url origin
[ +105 ms] Exit code 0 from: git ls-remote --get-url origin
[   +1 ms] https://github.com/flutter/flutter.git
[ +164 ms] executing: [C:\flutter/] git rev-parse --abbrev-ref HEAD
[ +110 ms] Exit code 0 from: git rev-parse --abbrev-ref HEAD
[   +1 ms] master
[ +121 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterWebSdk' is not required, skipping update.
[   +5 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[  +96 ms] executing: C:\Users\Fujitsu\AppData\Local\Android\sdk\platform-tools\adb.exe devices -l
[ +325 ms] List of devices attached
[  +12 ms] Artifact Instance of 'AndroidGenSnapshotArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'AndroidInternalBuildArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'IOSEngineArtifacts' is not required, skipping update.
[   +6 ms] Artifact Instance of 'WindowsEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxEngineArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'LinuxFuchsiaSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'MacOSFuchsiaSDKArtifacts' is not required, skipping update.
[   +1 ms] Artifact Instance of 'FlutterRunnerSDKArtifacts' is not required, skipping update.
[        ] Artifact Instance of 'FlutterRunnerDebugSymbols' is not required, skipping update.
[ +153 ms] Skipping pub get: version match.
[ +156 ms] Found plugin integration_test at C:\flutter\packages\integration_test\
[ +261 ms] Found plugin integration_test at C:\flutter\packages\integration_test\
[  +15 ms] Generating C:\Users\Fujitsu\StudioProjects\flutter_app_72273\flutter_app_72273\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java
[ +317 ms] Launching lib\main.dart on Chrome in debug mode...
[ +162 ms] Updating assets
[ +193 ms] Waiting for connection from debug service on Chrome...
[  +91 ms] Found plugin integration_test at C:\flutter\packages\integration_test\
[  +70 ms] Found plugin integration_test at C:\flutter\packages\integration_test\
[ +124 ms] <- reset
[  +10 ms] C:\flutter\bin\cache\dart-sdk\bin\dart.exe --disable-dart-dev C:\flutter\bin\cache\artifacts\engine\windows-x64\frontend_server.dart.snapshot --sdk-root
C:\flutter\bin\cache\flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names --experimental-emit-debug-metadata --output-dill
C:\Users\Fujitsu\AppData\Local\Temp\flutter_tools.c1fd55ca\flutter_tool.c32bc3ba\app.dill --libraries-spec file:///C:/flutter/bin/cache/flutter_web_sdk/libraries.json
--packages C:\Users\Fujitsu\StudioProjects\flutter_app_72273\flutter_app_72273\.dart_tool\package_config.json -Ddart.vm.profile=false -Ddart.vm.product=false --enable-asserts
--track-widget-creation --filesystem-root C:\Users\Fujitsu\AppData\Local\Temp\flutter_tools.c1fd55ca\flutter_tools.78400603 --filesystem-scheme org-dartlang-app
--initialize-from-dill build\fbbe6a61fb7a1de317d381f8df4814e5.cache.dill.track.dill --platform file:///C:/flutter/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
--no-sound-null-safety
[  +37 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+26094 ms] Waiting for connection from debug service on Chrome... (completed in 26,4s)
[   +3 ms] Synced 28.5MB.
[   +1 ms] <- accept
[   +1 ms] Caching compiled dill
[ +485 ms] Using Otwieram w istniejącej sesji przeglądarki.

[+3824 ms] [CHROME]:
[   +2 ms] [CHROME]:DevTools listening on ws://127.0.0.1:49798/devtools/browser/a2c16292-b63e-4e8c-a2fb-8cd62fd64191
[+1471 ms] DwdsInjector: Received request for entrypoint at http://localhost:49756/main_module.bootstrap.js
[   +8 ms] MetadataProvider: Loading debug metadata...
[  +29 ms] MetadataProvider: Loaded debug metadata
[  +18 ms] DwdsInjector: Injected debugging metadata for entrypoint at http://localhost:49756/main_module.bootstrap.js
[+7797 ms] DevHandler: Debug service listening on ws://127.0.0.1:49826/LN1nAAbboec=/ws

[  +15 ms] Debug service listening on ws://127.0.0.1:49826/LN1nAAbboec=/ws
[   +2 ms] Running with unsound null safety
[   +1 ms] For more information see https://dart.dev/null-safety/unsound-null-safety
[   +3 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[   +1 ms] been thoroughly tested in production environments.
[   +1 ms] For more information see https://flutter.dev/web
[   +1 ms]   To hot restart changes while running, press "r" or "R".
[   +2 ms] For a more detailed help message, press "h". To quit, press "q".

Answer 4 · 2020-12-14T22:32:55.000Z

import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() {
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(
    MaterialApp(
      home: IgnorePointer(
        child: Column(
          children: [
            RaisedButton(
              onPressed: () => print("pressed"),
              child: Text(
                  "This button is ignored as supposed to,\nbut the HtmlElementView is not"),
            ),
            SizedBox(
              width: 640,
              height: 360,
              child: HtmlElementView(viewType: 'hello-world-html'),
            ),
          ],
        ),
      ),
    ),
  );
}

Answer 5 · 2020-12-14T23:32:25.000Z

I think there's everything you asked for

Answer 6 · 2020-12-15T07:31:06.000Z

Hi @simon-the-shark
Thanks for the reproducible code sample, I can reproduce the issue using DOM Canvas, it works fine with Canvaskit.

code sample

import 'dart:html';
import 'dart:ui' as ui;

import 'package:flutter/material.dart';

void main() {
  ui.platformViewRegistry.registerViewFactory(
      'hello-world-html',
      (int viewId) => IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(
    MaterialApp(
      home: IgnorePointer(
        child: Column(
          children: [
            RaisedButton(
              onPressed: () => print("pressed"),
              child: Text(
                  "This button is ignored as supposed to,\nbut the HtmlElementView is not"),
            ),
            SizedBox(
              width: 640,
              height: 360,
              child: HtmlElementView(viewType: 'hello-world-html'),
            ),
          ],
        ),
      ),
    ),
  );
}

multiple flutter doctor -v

[✓] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
    • Flutter version 1.24.0-10.2.pre at C:\Code\flutter_beta
    • Framework revision 022b333a08 (4 weeks ago), 2020-11-18 11:35:09 -0800
    • Engine revision 07c1eed46b
    • Dart version 2.12.0 (build 2.12.0-29.10.beta)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Code\sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Code\sdk
    • Java binary at: C:\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] VS Code (version 1.52.0)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.17.0

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API 30) (emulator)
    • Web Server (web)        • web-server    • web-javascript • Flutter Tools
    • Chrome (web)            • chrome        • web-javascript • Google Chrome 87.0.4280.88
    • Edge (web)              • edge          • web-javascript • Microsoft Edge 85.0.564.67

• No issues found!

[✓] Flutter (Channel master, 1.25.0-9.0.pre.57, on Microsoft Windows [Version 10.0.19042.685], locale en-US)
    • Flutter version 1.25.0-9.0.pre.57 at C:\Code\flutter_master
    • Framework revision f37969638d (4 hours ago), 2020-12-14 22:18:03 -0500
    • Engine revision 1749dbcc1b
    • Dart version 2.12.0 (build 2.12.0-150.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Code\sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = C:\Code\sdk
    • Java binary at: C:\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.8.3)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.8.30804.86
    • Windows 10 SDK version 10.0.18362.0

[✓] Android Studio (version 4.1.0)
    • Android Studio at C:\Code\android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[✓] VS Code (version 1.52.0)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.17.0

[✓] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.685]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 87.0.4280.88
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 85.0.564.67

• No issues found!

Answer 7 · 2020-12-17T21:41:04.000Z

/cc @ditman

Answer 8 · 2020-12-17T22:01:07.000Z

Hey @simon-the-shark, thanks for the report!

We've just released a package (last night) that might be helpful: https://pub.dev/packages/pointer_interceptor

Can you check it and see if it helps in your case? You just need to wrap the elements that are getting overlaid on top of the HtmlElementView in a PointerInterceptor, and their mouse events should work as expected.

This issue is a dup of: #54027

Answer 9 · 2020-12-18T21:10:33.000Z

Hi! Thanks for fast dealing with this problem. I can confirm I've managed to achieve expected behaviour. However, I had to simulate barrierDissmisable option, when showing an AlertDialog, with Stack and GestureDetector. Just a small notice, it's working completely fine.

 return PointerInterceptor(
      child: Stack(
        children: [
          GestureDetector(onTap: Navigator.of(context).pop),
          AlertDialog(
            title: // the rest of the dialog

Thanks again for your help. I guess I'm just gonna close this issue now

Answer 10 · 2020-12-18T21:43:07.000Z

@simon-the-shark yes, for more complex widgets (anything "modal"), this should be applied at the widget level, so the whole component is covered without having to use the PointerInterceptor (ideally!), but that's harder to get into the framework :)

Glad you found a workaround for your issue, thanks again for reporting!

Answer 11 · 2021-08-08T05:00:52.000Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.