[web] Button becomes un-tappable in Flutter Web when a TextField is present.
- Dominant language
- Dart
- Stars
- 179k
- Forks
- 31.1k
- PR merge metrics
- PR metrics pending
Description
An internal customer reported (b/350613557) a problem with text fields and buttons (and routes) in the flutter web canvaskit renderer.
lib/main.dart
```dart
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
void main() async {
runApp(
MyApp(),
);
}
final goRouter = GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => Scaffold(
body: Center(
child: TextButton(
onPressed: () => context.go('/next'),
child: Text('Next'),
),
),
),
),
GoRoute(
path: '/next',
builder: (context, state) => MyHomePage(
title: 'Next page',
),
),
],
);
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp.router(
title: 'Flutter Demo',
routerConfig: goRouter,
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
),
automaticallyImplyLeading: false,
leading: BackButton(
onPressed: () {
context.go('/');
},
),
),
body: Column(
children: [
TextField(
autofocus: true,
),
],
),
);
}
}
```
web/index.html
```html
window.addEventListener('load', function (ev) {
_flutter.loader.loadEntrypoint({
entrypointUrl: 'main.dart.js',
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
});
```
To reproduce:
1. Navigate to and from the nested route using the buttons.
2. Focus, unfocus the text field.
3. Repeat.
Observed behavior:
* Button becomes unresponsive very soon. It happens sooner or later.
* Exceptions:
```
(errors.dart:296:3)
at Object.assertFailed (errors.dart:29:3)
at Object._computeOffsetForInputs (event_position_helper.dart:64:37)
at Object.computeEventOffsetToTarget (event_position_helper.dart:32:14)
at [_convertEventsToPointerData] (pointer_binding.dart:1062:30)
at pointer_binding.dart:1001:9
at pointer_binding.dart:939:7
at loggedHandler (pointer_binding.dart:532:9)
at Object._callDartFunctionFast1 (js_allow_interop_patch.dart:188:27)
at ret (js_allow_interop_patch.dart:81:15)
```
Contributor guide
Research direction
Reproduce the issue using lib/main.dart and web/index.html with the CanvasKit renderer, following the route navigation and TextField focus steps. Start with the assertion in event_position_helper.dart and the pointer conversion stack shown in the report. Done means repeated navigation and focus changes leave the buttons tappable without pointer-event exceptions.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- dart, flutter
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100