PhysicalX / PhysicalY are incorrect in web engine when clicking on top of flt-text-editing-host #125948
Closed
2 tasks done
Assignees
Labels
c: new feature
Nothing broken; request for a new capability
c: proposal
A detailed proposal for a change to Flutter
engine
flutter/engine repository. See also e: labels.
P1
High-priority issues at the top of the work list
platform-web
Web applications specifically
r: fixed
Issue is closed as already fixed in a newer version
Comments
|
A temporary hack for anyone encountering this is that you can set pointer-events:none to flt-text-editing-host, but maybe that has undesirable effects in some cases (not popping keyboard on mobile browsers?). |
|
Thanks for the report @jezell
Can you provide us a minimal complete code sample for this ? |
darshankawar
added
the
waiting for customer response
|
@darshankawar yeah, I'll try to put one together. Was seeing it inside our app with unreliable selection when zoomed and took a bit to track down why. I think I should be able to put something together that illustrates the problem now that I know the cause. |
github-actions
bot
removed
the
waiting for customer response
|
This sample illustrates the problem. Click twice over the textbox, the first click will hit the canvas. The second click should hit the text editing host. Note that it prints widely different coordinates for the local positionX despite hitting the same position: import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
final scale = Matrix4.identity();
scale.translate(-100, -100);
scale.scale(2);
return Material(
child: Stack(
children: [
Transform(
alignment: Alignment.topLeft,
transform: scale,
child: Stack(children: [
Positioned(
top: 100,
left: 100,
child: SizedBox(
width: 4000,
height: 4000,
child: ClipRect(
child: Listener(
onPointerDown: (event) =>
print(event.localPosition),
child: TextFormField(
initialValue:
'XXXXXX ${scale.getMaxScaleOnAxis()}')))))
]))
]));
}
}
|
|
Thanks for the update. I ran it on web and observed that upon first two clicks in the textfield, the offset values are different: Then subsequent clicks shows correct offsets as below: stable, master flutter doctor -v |
darshankawar
added
c: new feature
|
@darshankawar yes, that is because from then on you are clicking on the text host unless it loses focus. All of those values after the first are incorrect coordinates. Only the first one is the true coordinate. |
|
Tentatively making it a P3, as it may actually be a regression either due to custom element embedding or the top-level DOM restructure to fix form autofill. |
|
Investigated this issue a bit and found a couple of things:
I'm curious as to what side effects might occur by setting I can do some more extensive testing to see if that's a viable solution. We also might be able to get away with just skipping the platform offset calculation when Edit: |
8 tasks
2 tasks
auto-submit bot
pushed a commit
to flutter/engine
that referenced
this issue
May 19, 2023
#41870) Text inputs have moved outside of the shadowDOM and are now using the pointer event offset calculation algorithm that platform views use. However, transforms (e.g. scaling) applied to the input element aren't currently accounted for, which leads to incorrect offsets and clicks being registered inaccurately. This PR attempts to transform those offset coordinates using the transform matrix data that is included in the geometry information sent over to `text_editing.dart` from the framework. ## Issues * Fixes flutter/flutter#125948 (text editing) * Fixes flutter/flutter#126661 (platform view scaling) * Fixes flutter/flutter#126754 [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
ditman
pushed a commit
to ditman/flutter-engine
that referenced
this issue
May 19, 2023
* git cherry-pick 4f3f7bb (+ conflict fixes) This cherry-pick backports flutter#41870 to Flutter 3.10. Original commit message below: [web] Fix event offset for transformed widgets (and text input nodes). (flutter#41870) Text inputs have moved outside of the shadowDOM and are now using the pointer event offset calculation algorithm that platform views use. However, transforms (e.g. scaling) applied to the input element aren't currently accounted for, which leads to incorrect offsets and clicks being registered inaccurately. This PR attempts to transform those offset coordinates using the transform matrix data that is included in the geometry information sent over to `text_editing.dart` from the framework. * Fixes flutter/flutter#125948 (text editing) * Fixes flutter/flutter#126661 (platform view scaling) * Fixes flutter/flutter#126754
ditman
pushed a commit
to ditman/flutter-engine
that referenced
this issue
May 19, 2023
* git cherry-pick 4f3f7bb (+ conflict fixes) This cherry-pick backports flutter#41870 to Flutter 3.10. Original commit message below: [web] Fix event offset for transformed widgets (and text input nodes). (flutter#41870) Text inputs have moved outside of the shadowDOM and are now using the pointer event offset calculation algorithm that platform views use. However, transforms (e.g. scaling) applied to the input element aren't currently accounted for, which leads to incorrect offsets and clicks being registered inaccurately. This PR attempts to transform those offset coordinates using the transform matrix data that is included in the geometry information sent over to `text_editing.dart` from the framework. * Fixes flutter/flutter#125948 (text editing) * Fixes flutter/flutter#126661 (platform view scaling) * Fixes flutter/flutter#126754
8 tasks
|
A fix is coming to Flutter |
darshankawar
added
the
r: fixed
auto-submit bot
pushed a commit
to flutter/engine
that referenced
this issue
May 24, 2023
This cherry-pick backports #41870 to Flutter 3.10. * git cherry-pick 4f3f7bb (+ conflict fixes) Original commit message below: [web] Fix event offset for transformed widgets (and text input nodes). (#41870) Text inputs have moved outside of the shadowDOM and are now using the pointer event offset calculation algorithm that platform views use. However, transforms (e.g. scaling) applied to the input element aren't currently accounted for, which leads to incorrect offsets and clicks being registered inaccurately. This PR attempts to transform those offset coordinates using the transform matrix data that is included in the geometry information sent over to `text_editing.dart` from the framework. * Fixes flutter/flutter#125948 (text editing) * Fixes flutter/flutter#126661 (platform view scaling) * Fixes flutter/flutter#126754 [C++, Objective-C, Java style guides]: https://github.com/flutter/engine/blob/main/CONTRIBUTING.md#style
|
A hotfix to alleviate this issue has been released on |
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Is there an existing issue for this?
Use case
The engine seems to assume that the flutter view was the source of all events, so when it hits flt-text-editing-host it delivers incorrect pointer event data.
Proposal
Perhaps the web engine should make sure that the event was actually on the canvas host element it thinks it was on, and if not, convert the coordinates when converting the DomEvent to PointerData.
The text was updated successfully, but these errors were encountered: