[web] Text fields support multi-view #153022
Description
Steps to reproduce
Create a simple Flutter application (counter app), with a Text input field.
Create a web build
Integrate web build in Angular web app
Add a text input field in Angular web app
Run the angular web-app
First click on text input field in Flutter component
Then try to click on text input field in Angular component
Expected results
Text input field in Angular web component should get focused on click
Actual results
Text input field in Angular web component does not get focused on click
Code sample
Code sample
Text fields can be added in Flutter and Angular components of ng-flutter
https://github.com/flutter/samples/tree/main/web_embedding/ng-flutter
TextFormField() in Flutter
And below part in Angular component
<label for="fname">HTML Input:</label>
<input type="text" id="fname" name="fname">Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
Logs
[Paste your logs here]Flutter Doctor output
Doctor output
[✓] Flutter (Channel stable, 3.22.0, on macOS 14.5 23F79 darwin-arm64, locale
en-GB)
• Flutter version 3.22.0 on channel stable at
/Users/adwaitsamant/Desktop/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5dcb86f68f (3 months ago), 2024-05-09 07:39:20 -0500
• Engine revision f6344b75dc
• Dart version 3.4.0
• DevTools version 2.34.3
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
• Android SDK at /Users/adwaitsamant/Library/Android/sdk
• Platform android-34, build-tools 33.0.2
• ANDROID_HOME = /Users/adwaitsamant/Library/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build
17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15F31d
• CocoaPods version 1.15.2
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio.app/Contents
• 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
17.0.6+0-17.0.6b802.4-9586694)
[✓] VS Code (version 1.91.0)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.94.0
[✓] VS Code (version 1.67.2)
• VS Code at /Applications/Visual Studio Code copy.app/Contents
• Flutter extension version 3.94.0
[✓] Connected device (4 available)
• iPhone SE (3rd generation) (mobile) • 6583543C-0AF0-4B1B-A0F8-5970CDC9ABD9 •
ios • com.apple.CoreSimulator.SimRuntime.iOS-17-5 (simulator)
• macOS (desktop) • macos •
darwin-arm64 • macOS 14.5 23F79 darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad •
darwin • macOS 14.5 23F79 darwin-arm64
• Chrome (web) • chrome •
web-javascript • Google Chrome 127.0.6533.99
[✓] Network resources
• All expected network resources are available.
• No issues found!Metadata
Metadata
Assignees
Labels
High-priority issues at the top of the work listEntering text in a text field or keyboard related problemsFound to occur in 3.24The issue has been confirmed reproducible and is ready to work onWeb applications specificallyIssue is closed as already fixed in a newer versionOwned by Web platform teamTriaged by Web platform team