AutofillHints.oneTimeCode not works on flutter web on iOS #104693

amir14a · 2022-05-26T07:56:33Z

Hi, I want to suggest sms one time code to the user on iOS, flutter web, safari browser.
I tried many options but none of them solved the problem.
my code:

import 'package:flutter/material.dart';

void main() {
  runApp(const TestOneTimeCodeApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              TextField(
                autofillHints: [AutofillHints.oneTimeCode],
                decoration: InputDecoration(hintText: "text input with autofill hint=oneTimeCode"),
              ),//not works
              TextField(
                keyboardType: TextInputType.number,
                autofillHints: [AutofillHints.oneTimeCode],
                decoration: InputDecoration(hintText: "text input with autofill hint=oneTimeCode and keyboardType=number"),
              ),//not works
              TextField(
                keyboardType: TextInputType.phone,
                autofillHints: [AutofillHints.oneTimeCode],
                decoration: InputDecoration(hintText: "text input with autofill hint=oneTimeCode and keyboardType=phone"),
              ),//not works
            ],
          ),
        ),
      ),
    );
  }
}

[√] Flutter (Channel stable, 3.0.1, on Microsoft Windows [Version 10.0.19042.1110], locale en-US)

It works on iOS native app, but not works on flutter web on iOS
the result:

The text was updated successfully, but these errors were encountered:

huycozy · 2022-05-26T11:58:23Z

Hi @amir14a,
I'm not sure if this feature is available in any app yet. If yes, can you please cite it here?

However, I've verified this on iOS app and Web app.
It worked on iOS but the Web(Safari) did not.

Thanks!

amir14a · 2022-05-26T14:48:04Z

Hi @huycozy
I don't know any flutter application that supports this feature on web, but there are many web applications that are not developed with flutter and supports this feature.

For example, I write this simple html code and it works:

<form action="">
        <input name="one-time-code" id="one-time-code" type="text" autocomplete="one-time-code" autocorrect="off">
        //this not works
        <br>
        <input name="one-time-code" id="one-time-code" type="tel" autocomplete="one-time-code" autocorrect="off">
        //this works
</form>

huycozy · 2022-05-27T04:51:36Z

Thanks for responding. This issue is reproducible on the latest stable and master channels.

Demo

Web browser (Safari)	iOS

flutter doctor -v

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.0.1 at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (8 hours ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-32, 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
    • 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)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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 1.8.0_242-release-1644-b3-6915495)

[✓] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/Android Studio
      Preview.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.8+10-b944.6842174)

[✓] 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

[✓] VS Code (version 1.67.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.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.2.1 21D62 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 101.0.4951.64

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

• No issues found!

[✓] Flutter (Channel master, 3.1.0-0.0.pre.960, on macOS 12.2.1 21D62 darwin-x64, locale en-VN)
    • Flutter version 3.1.0-0.0.pre.960 at /Users/huynq/Documents/GitHub/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5f742c96d3 (75 minutes ago), 2022-05-26 22:35:09 -0400
    • Engine revision 8b221027f3
    • Dart version 2.18.0 (build 2.18.0-149.0.dev)
    • DevTools version 2.13.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-32, 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
    • 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)

[✓] Android Studio (version 4.1)
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/201.7042882/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 1.8.0_242-release-1644-b3-6915495)

[!] Android Studio
    • Android Studio at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-1/203.7185775/Android Studio
      Preview.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] 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

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

[✓] Connected device (3 available)
    • iPad Pro (9.7-inch) (mobile) • 18AFB65F-7639-4B97-86BD-2A60F1B99BBC • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-4
      (simulator)
    • macOS (desktop)              • macos                                • darwin-x64     • macOS 12.2.1 21D62 darwin-x64
    • Chrome (web)                 • chrome                               • web-javascript • Google Chrome 101.0.4951.64

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

! Doctor found issues in 1 category.

up-dog · 2022-06-12T02:41:32Z

Hi, I am running into the same issue. During testing I noticed that iOS Chrome supports autofilling. The issue is specific to safari. Hope this gets resolved quickly!

Peng-Qian · 2022-07-04T00:39:35Z

any updates?

NikFanton · 2023-02-28T22:15:42Z

Any updates so far?

yuvansundrani · 2023-07-14T17:13:12Z

Would really appreciate if someone solved this, still not working on Safari...

nikolaychernov · 2023-08-22T17:21:22Z

Works for me in Safari in Flutter 3.13.0

marcosicp · 2024-02-23T05:35:19Z

any news on this?

huycozy added the in triage Presently being triaged by the triage team label May 26, 2022

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 26, 2022

github-actions bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label May 26, 2022

cyanglaz removed the platform-ios iOS applications specifically label May 27, 2022

yjbanov added c: new feature Nothing broken; request for a new capability P3 Issues that are less important to the Flutter project labels May 28, 2022

flutter-triage-bot bot added multiteam-retriage-candidate team-web Owned by Web platform team triaged-web Triaged by Web platform team labels Jul 8, 2023

This comment was marked as duplicate.

Sign in to view

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AutofillHints.oneTimeCode not works on flutter web on iOS #104693

AutofillHints.oneTimeCode not works on flutter web on iOS #104693

amir14a commented May 26, 2022 •

edited

huycozy commented May 26, 2022

amir14a commented May 26, 2022 •

edited

huycozy commented May 27, 2022

up-dog commented Jun 12, 2022

Peng-Qian commented Jul 4, 2022

NikFanton commented Feb 28, 2023

yuvansundrani commented Jul 14, 2023

nikolaychernov commented Aug 22, 2023

This comment was marked as duplicate.

marcosicp commented Feb 23, 2024

AutofillHints.oneTimeCode not works on flutter web on iOS #104693

AutofillHints.oneTimeCode not works on flutter web on iOS #104693

Comments

amir14a commented May 26, 2022 • edited

huycozy commented May 26, 2022

amir14a commented May 26, 2022 • edited

huycozy commented May 27, 2022

up-dog commented Jun 12, 2022

Peng-Qian commented Jul 4, 2022

NikFanton commented Feb 28, 2023

yuvansundrani commented Jul 14, 2023

nikolaychernov commented Aug 22, 2023

This comment was marked as duplicate.

marcosicp commented Feb 23, 2024

amir14a commented May 26, 2022 •

edited

amir14a commented May 26, 2022 •

edited