Skip to content

Multi-step input composing range incorrectly styled on iOS #9343

Open
Open
Multi-step input composing range incorrectly styled on iOS#9343
Labels
P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms bettera: internationalizationSupporting other languages or locales. (aka i18n)a: text inputEntering text in a text field or keyboard related problemsfound in release: 3.3Found to occur in 3.3found in release: 3.5Found to occur in 3.5frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyteam-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

Description

@cbracken
cbracken
opened on Apr 12, 2017

Steps to Reproduce

  1. Open Flutter Gallery and select the Text field demo.
  2. Tap the Name field.
  3. Switch to Japanese/Chinese input and begin entering text.

The composing (a.k.a. mark) region is underlined, rather than appearing lightly selected.

See the following screenshots:

Current Flutter composing style

img_1413

Default iOS composing style (from Google Inbox)

img_1414

Default iOS selection style (from Google Inbox)

img_1415

Flutter Doctor

Running with a local engine with iOS text input patches. Base install is:

[✓] Flutter (on Mac OS X 10.12.4 16E195, channel master)
    • Flutter at /Users/cbracken/src/flutter/flutter
    • Framework revision c12c019bcc (6 hours ago), 2017-04-11 13:48:04 -0700
    • Engine revision 5d9a642257
    • Tools Dart version 1.23.0-dev.11.6

Activity

  1. cbracken
    added
    a: fidelityMatching the OEM platforms better
    frameworkflutter/packages/flutter repository. See also f: labels.
    a: text inputEntering text in a text field or keyboard related problems
    platform-iosiOS applications specifically
    on Apr 12, 2017
  2. cbracken
    added this to the milestone on Apr 12, 2017
  3. Hixie
    added
    a: internationalizationSupporting other languages or locales. (aka i18n)
    on Dec 6, 2017
  4. Hixie
    modified the milestones: 3: Current Milestone, on Apr 11, 2018
  5. engine-flutter-autoroll
    added 7 commits that reference this issue on Jun 29, 2019

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    6374cc1

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    1886842

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    4be695c

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    f6bf380

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    25df75f

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    f702b39

    fc1d86b Revert "Avoid a full screen overlay within virtual displays (f…

    d56d9e3

  6. 41 remaining items

  7. danagbemava-nc commented on Oct 21, 2022

    @danagbemava-nc
    danagbemava-nc
    on Oct 21, 2022
    Member

    Reproducible on the latest versions of stable and master.

    recordings
    native flutter
    Simulator.Screen.Recording.-.iPhone.14.Pro.-.2022-10-21.at.10.28.54.mp4
    Simulator.Screen.Recording.-.iPhone.14.Pro.-.2022-10-21.at.10.28.21.mp4
    sample 
    import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const TextField(),
      ),
    );
  }
}
    flutter doctor -v 
    [✓] Flutter (Channel stable, 3.3.5, on macOS 12.6 21G115 darwin-arm, locale en-GB)
    • Flutter version 3.3.5 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d9111f6402 (2 days ago), 2022-10-19 12:27:13 -0700
    • Engine revision 3ad69d7be3
    • Dart version 2.18.2
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

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

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

[!] Android Studio
    • Android Studio at /Applications/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.

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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.13+0-b1751.21-8125866)

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

[✓] Connected device (3 available)
    • iPhone 14 Pro (mobile) • 4302007A-B132-4B89-887A-C5993FCA3284 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 106.0.5249.119

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

! Doctor found issues in 2 categories.

    [!] Flutter (Channel master, 3.5.0-10.0.pre.17, on macOS 12.6 21G115 darwin-arm64, locale en-GB)
    • Flutter version 3.5.0-10.0.pre.17 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 59d26c481a (11 hours ago), 2022-10-20 20:05:08 -0400
    • Engine revision f24ea1a04d
    • Dart version 2.19.0 (build 2.19.0-324.0.dev)
    • DevTools version 2.18.0
    • 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 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

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

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

[!] Android Studio
    • Android Studio at /Applications/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.

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.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.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/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.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/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.13+0-b1751.21-8125866)

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

[✓] Connected device (3 available)
    • iPhone 14 Pro (mobile) • 4302007A-B132-4B89-887A-C5993FCA3284 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-0 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 106.0.5249.119

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

! Doctor found issues in 3 categories.
  8. danagbemava-nc
    added
    found in release: 3.3Found to occur in 3.3
    found in release: 3.5Found to occur in 3.5
    and removed
    found in release: 1.21Found to occur in 1.21
    on Oct 21, 2022
  9. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-iosOwned by iOS platform team
    triaged-iosTriaged by iOS platform team
    on Jul 8, 2023

  10. cbracken commented on Aug 29, 2023

    @cbracken
    cbracken
    on Aug 29, 2023
    MemberAuthor

    Just a quick heads-up that the styling has changed in macOS 14 (Sonoma); interestingly it's now closer to what we already do than it was before.

  11. cbracken commented on Aug 29, 2023

    @cbracken
    cbracken
    on Aug 29, 2023
    MemberAuthor

    The look on iOS 17:
    画像

  12. Hixie
    removed
    multiteam-retriage-candidate
    on Mar 6, 2024

  13. justinmc commented on Mar 21, 2024

    @justinmc
    justinmc
    on Mar 21, 2024
    Contributor

    Just to leave an update on this old issue, looks like Flutter is giving the composing region a thin black underline while native iOS now has a thick blue underline.

  14. justinmc
    added
    team-text-inputOwned by Text Input team
    triaged-text-inputTriaged by Text Input team
    and removed
    team-iosOwned by iOS platform team
    triaged-iosTriaged by iOS platform team
    on Mar 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: fidelityMatching the OEM platforms bettera: internationalizationSupporting other languages or locales. (aka i18n)a: text inputEntering text in a text field or keyboard related problemsfound in release: 3.3Found to occur in 3.3found in release: 3.5Found to occur in 3.5frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyteam-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions