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

simon-the-shark · 2020-12-14T13:44:09Z

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

simon-the-shark · 2020-12-14T13:44:18Z

λ 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!

TahaTesser · 2020-12-14T14:38:00Z

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

simon-the-shark · 2020-12-14T22:30:20Z

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:https:///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:https:///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:https://127.0.0.1:49798/devtools/browser/a2c16292-b63e-4e8c-a2fb-8cd62fd64191
[+1471 ms] DwdsInjector: Received request for entrypoint at https://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 https://localhost:49756/main_module.bootstrap.js
[+7797 ms] DevHandler: Debug service listening on ws:https://127.0.0.1:49826/LN1nAAbboec=/ws

[  +15 ms] Debug service listening on ws:https://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".

simon-the-shark · 2020-12-14T22:32:55Z

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'),
            ),
          ],
        ),
      ),
    ),
  );
}

simon-the-shark · 2020-12-14T23:32:25Z

I think there's everything you asked for

TahaTesser · 2020-12-15T07:31:06Z

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!

ferhatb · 2020-12-17T21:41:04Z

/cc @ditman

ditman · 2020-12-17T22:01:07Z

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

simon-the-shark · 2020-12-18T21:10:33Z

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

ditman · 2020-12-18T21:43:07Z

@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!

github-actions · 2021-08-08T05:00:52Z

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.

TahaTesser added in triage Presently being triaged by the triage team waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Dec 14, 2020

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Dec 14, 2020

TahaTesser changed the title ~~HtmlElementView and IgnorePointer~~ [web] IgnorePointer or AbsorbPointer doesn't work with HtmlElementView on DomCanvas Dec 15, 2020

ferhatb assigned ditman Dec 17, 2020

ferhatb added the assigned for triage issue is assigned to a domain expert for further triage label Dec 17, 2020

simon-the-shark closed this as completed Dec 18, 2020

github-actions bot locked as resolved and limited conversation to collaborators Aug 8, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

simon-the-shark commented Dec 14, 2020

simon-the-shark commented Dec 14, 2020 •

edited by TahaTesser

Loading

TahaTesser commented Dec 14, 2020

simon-the-shark commented Dec 14, 2020 •

edited by TahaTesser

Loading

simon-the-shark commented Dec 14, 2020

simon-the-shark commented Dec 14, 2020

TahaTesser commented Dec 15, 2020

ferhatb commented Dec 17, 2020

ditman commented Dec 17, 2020

simon-the-shark commented Dec 18, 2020

ditman commented Dec 18, 2020

github-actions bot commented Aug 8, 2021

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

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

Comments

simon-the-shark commented Dec 14, 2020

Steps to Reproduce

simon-the-shark commented Dec 14, 2020 • edited by TahaTesser Loading

TahaTesser commented Dec 14, 2020

simon-the-shark commented Dec 14, 2020 • edited by TahaTesser Loading

simon-the-shark commented Dec 14, 2020

simon-the-shark commented Dec 14, 2020

TahaTesser commented Dec 15, 2020

ferhatb commented Dec 17, 2020

ditman commented Dec 17, 2020

simon-the-shark commented Dec 18, 2020

ditman commented Dec 18, 2020

github-actions bot commented Aug 8, 2021

simon-the-shark commented Dec 14, 2020 •

edited by TahaTesser

Loading

simon-the-shark commented Dec 14, 2020 •

edited by TahaTesser

Loading