flutter / flutter/flutter

HtmlElementView Key Strokes interfering with primary ScrollView

Open
#163,534 2 comments 0 reactions 0 assignees View on GitHub
a: text input found in release: 3.29 found in release: 3.30 has reproducible steps P2 platform-web team-web triaged-web
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

1. Paste the code below in a fresh flutter project
2. Try to type in the html input field every character works but not the space and enter (space scroll the flutter scrollview instead)

### Expected results

I want the event to be caught by the html input element and the space to be written to the input field

### Actual results

Nothing is written to the input field and the scrollview is scrolling

### Code sample

Code sample

```dart
import 'package:flutter/material.dart';
import 'package:web/web.dart' as web;
import 'dart:ui_web' as ui;

void main() {
ui.platformViewRegistry.registerViewFactory(
'my-html-view', // Unique identifier for the view
(int viewId) {
final div = web.HTMLInputElement();
div.style
..width = '500px'
..height = '100px';

return div;
},
);

runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
CustomScrollView(
primary: true,
slivers: [
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) => ListTile(title: Text('Item #$index')),
childCount: 300,
),
),
],
),
const SizedBox(
width: 500,
height: 100,
child: HtmlElementView(viewType: 'my-html-view'),
),
],
),
),
);
}
}

```

### Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

### Logs

Logs

```console
Performing hot restart...
Waiting for connection from debug service on Chrome...
Restarted application in 95ms.
```

### Flutter Doctor output

Doctor output

```console
[!] Flutter (Channel [user-branch], 3.24.5, on Ubuntu 22.04.5 LTS 6.8.0-52-generic, locale en_US.UTF-8)
! Flutter version 3.24.5 on channel [user-branch] at /home/ortes/flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
! Upstream repository unknown source is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
• Framework revision dec2ee5c1f (3 months ago), 2024-11-13 11:13:06 -0800
• Engine revision a18df97ca5
• Dart version 3.5.4
• DevTools version 2.37.3
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly
to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
• Android SDK at /home/ortes/Android/Sdk
• Platform android-35, build-tools 35.0.1
• Java binary at: /home/ortes/.local/share/JetBrains/Toolbox/apps/android-studio/jbr/bin/java
• Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)
• All Android licenses accepted.

[✓] Chrome - develop for the web
• Chrome at google-chrome

[✓] Android Studio (version 2024.2)
• Android Studio at /home/ortes/.local/share/JetBrains/Toolbox/apps/android-studio
• Flutter plugin version 83.0.3
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)

[✓] VS Code (version 1.96.4)
• VS Code at /usr/share/code
• Flutter extension version 3.102.0

[✓] Connected device (1 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 133.0.6943.53

[✓] Network resources
• All expected network resources are available.

! Doctor found issues in 1 category.
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.