flutter / flutter/flutter

[web] Button becomes un-tappable in Flutter Web when a TextField is present.

Open
#151,292 1 comment 0 reactions 0 assignees View on GitHub
a: text input engine P3 team-web triaged-web
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.