iOS Safari / Chrome with TextInput - Keyboard not showing

[ipainchaud]

Internal: b/258262191

We have a Flutter application which uses Text inputs.
The text inputs work fine on Desktop WEB with Chrome, Safari, Firefox, Edge, Opera, etc.
The application works well also on mobile native iOS and Android. As you click on the input field, the keyboard appear and you can capture data. This is also true on Android WEB through Chrome.

On iOS WEB using Safari and Chrome though, when you click on the text input, the keyboard doesn't show and makes it impossible to capture data into it.

Here is a video exposing the issue. The video shows the execution of the same app twice. The first app to execute is the Native version. The second is the WEB app through Safari.

keyboard-issue_uaAYhtj3.mp4

We are using a form in our code to facilitate the validation. This issue also happens on every other type of Text input we use.

Widget build(BuildContext context) {
  return Title(
    [...]
    child: SingleChildScrollView(
      child: ConstrainedBox(
        constraints: [setting maxWidth...]
        child: IntrinsicHeight(
          child: _body,
        ),
      ),
    ),
  );
}

Widget get _body {
  return Form(
    key: _formKey,
    child: Column(
      [...]
      children: [
        [...]
        TextFormField(
          autofillHints: [...],
          decoration: [...],
          focusNode: [...],
          keyboardType: TextInputType.number,
          onChanged: [...],
          onFieldSubmitted: [...],
          textInputAction: TextInputAction.done,
          validator: [...],
        ),
      ],
    ),
  );
}

interesting facts:

The keyboard is displayed if you leave and come back to the app

1. is on Safari and click on a text input (the keyboard doesn't display)
2. and the user switches to another app
3. and the user switches back to Safari as the focus is on an input
4. Then! the keyboard appears and let you capture your information

Can it be related to Semantic being enabled???

I haven't been able to reproduce this through my gist on dartpad.io
Can it be caused by the fact that we useRendererBinding.instance.setSemanticsEnabled(true); in our main??? (see commented code in line 7 to 10 of the gist)

We are building an accessible app so we need this Semantic tree enabled.
Unfortunately, Darpad.IO doesn't seem to like that call to setSemanticsEnabled(true) as it doesn't load for me when I uncomment those lines.

This is not the number keypad which is displayed

When we execute the app from Android or iOS (both) and succeeds to show the keyboard, it displays the full keyboard, and not the numeric keypad.

iOS	Android

$ flutter analyze
Analyzing my-app...                                                
No issues found! (ran in 6.2s)

$ flutter doctor -v
[✓] Flutter (Channel stable, 3.0.5, on macOS 12.5.1 21G83 darwin-x64, locale en-US)
    • Flutter version 3.0.5 at /usr/local/Caskroom/flutter/3.0.2/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1875d570e (6 weeks ago), 2022-07-13 11:24:16 -0700
    • Engine revision e85ea0e79c
    • Dart version 2.17.6
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/israelpainchaud/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin version 222.3739.24

[✓] Connected device (5 available)
    • BS 02 (mobile)                      • 3d1896e7                             • android-arm64  • Android 8.1.0 (API 27)
    • sdk gphone64 x86 64 (mobile)        • emulator-5554                        • android-x64    • Android 13 (API 33) (emulator)
    • iPhone SE (3rd generation) (mobile) • 7B3F43F4-5669-4D38-8C80-B9FB8A077928 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-5 (simulator)
    • macOS (desktop)                     • macos                                • darwin-x64     • macOS 12.5.1 21G83 darwin-x64
    • Chrome (web)                        • chrome                               • web-javascript • Google Chrome 104.0.5112.101

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[vsomayaji]

This issue does appear to be caused by enabling accessibility. To reproduce it:

1. Run the code sample below with flutter run -d chrome.
2. Using Xcode's Simulator (Xcode > Open Developer Tool > Simulator), open an iPhone simulator (I used an iPhone 13 with iOS 15.5).
3. Disable the hardware keyboard (I/O > Keyboard > Connect Hardware Keyboard).
4. Open Safari and browse to the web app URL.
5. Tap in the TextField. The keyboard will not be displayed. (Press-and-hold and it will.)

If you disable accessibility (RendererBinding.instance.setSemanticsEnabled(false)), the issue goes away.

Code sample

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // Auto-enable accessibility for our Blind and Low Vision customers.
  RendererBinding.instance.setSemanticsEnabled(true);

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  final String _title = 'TextField A11y Issue';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(_title),
        ),
        body: const MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(40),
      child: Column(
        children: const <Widget>[
          Text('Tap in the TextField below. In a mobile browser on iOS, if a11y is enabled, the keyboard will NOT be '
              'displayed unless you press-and-hold in the text field.'),
          SizedBox(height: 20),
          TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Text',
            ),
          ),
        ],
      ),
    );
  }
}

TextFieldA11yIssue.mov

[huycozy]

Hi @ipainchaud

• For iOS issue, as @vsomayaji explained above, I think this behavior is working as intended. For more information: https://support.apple.com/en-al/guide/iphone/iph3e2e3d1d/ios

  Enter text with the onscreen keyboard
  Select a text field, then double-tap.
  The insertion point and the onscreen keyboard appear.

• For Android issue, I can reproduce it. When semantic is enabled (RendererBinding.instance.setSemanticsEnabled(true);), it does not display numeric keypad.

  

Could you please open a new issue for the Android case?

[ipainchaud]

Thanks for the read, it was very interesting.

VoiceOver changes how you use the onscreen keyboard when you activate an editable text field

This says that VoiceOver changes the behavior, but doesn't explain why the keyboard doesn't appear even when we don't have VoiceOver enabled.

About the Android case: I'll open another issue.

[huycozy]

Hi @ipainchaud
I tested this again. Without enabling RendererBinding.instance.setSemanticsEnabled(true); but enabling VoiceOver, the keyboard doesn't seem to show up even when double-tap/hold and press on the TextField whilst the iOS app (Flutter) does it right with double-tap (please see in demo)

Demo

Web	iOS
RPReplay_Final1661742663.MP4	RPReplay_Final1661743404.MP4

When enabling RendererBinding.instance.setSemanticsEnabled(true);, hold and press on the TextField will bring up the keyboard (as @vsomayaji mentioned above)

Do you have the same behavior?

[vsomayaji]

@huycozy I confirmed that if accessibility is not enabled and you're using VoiceOver with a Flutter web app on iOS, nothing seems to work correctly. It makes sense that a Flutter iOS app isn't affected, as the semantic tree is always built on mobile.

Our issue is that we always need to enable accessibility on web, even for our customers that are not using a screen reader. (Our philosophy is that accessibility isn't something that you should have to "opt in" to.) And that means that users who are not familiar with the press-and-hold requirement on text fields will be blocked when they tap in a text field and the keyboard is not displayed. 😦 Any thoughts on a fix/workaround?

[ipainchaud]

The issue is actually worst than that @vsomayaji @huycozy.

We all agree that if you have enable RendererBinding.instance.setSemanticsEnabled(true); it works as expected with VoiceOver with a double tap.

As @vsomayaji explained, we always enable the semantic tree, but with the RendererBinding.instance.setSemanticsEnabled(true); enabled, there is actually no way to get the keyboard without VoiceOver at all -- even with the double tap.

[huycozy]

@ipainchaud @vsomayaji, thanks for providing more information. Labeling this issue for further opinions/insights from the team.
This issue is reproducible on the latest stable and master channels.

• setSemanticsEnabled(true): the keyboard doesn't show, but press-and-hold on the TextField will bring the keyboard up (not the numeric keypad)
• setSemanticsEnabled(false): the keyboard shows numeric keypad as expected

Demo

Safari iOS (enable semantic)	Safari iOS (disable semantic)
RPReplay_Final1661918895.MP4	RPReplay_Final1661918846.MP4

Sample code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  if (kIsWeb) {
    // Auto-enable accessibility for screen reader users
    RendererBinding.instance.setSemanticsEnabled(true);
  }

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const String title = 'TextInput not showing Keyboard on mobile WEB - Issue';
    return MaterialApp(
      title: title,
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: title),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'please enter a number',
              ),
              TextFormField(
                keyboardType: TextInputType.number,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.3.0, on macOS 12.5 21G72 darwin-x64, locale en-EE)
    • Flutter version 3.3.0 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision ffccd96b62 (28 hours ago), 2022-08-29 17:28:57 -0700
    • Engine revision 5e9e0e0aa8
    • Dart version 2.18.0
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • iPhone 13 (mobile) • 2526BC1A-435D-4B08-B99C-44B928F2517B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 104.0.5112.101

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.2592, on macOS 12.5 21G72 darwin-x64, locale en-EE)
    • Flutter version 3.1.0-0.0.pre.2592 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 069f504297 (3 hours ago), 2022-08-30 18:20:09 -0700
    • Engine revision 0ef08a8525
    • Dart version 2.19.0 (build 2.19.0-152.0.dev)
    • DevTools version 2.16.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13E113
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2020.3.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.70.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0

[✓] Connected device (3 available)
    • iPhone 13 (mobile) • 2526BC1A-435D-4B08-B99C-44B928F2517B • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.5 21G72 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 104.0.5112.101

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!