[iOS] Cannot scroll horizontally if swipe over TextField child #142624

giordy16 · 2024-01-31T17:48:17Z

Steps to reproduce

Create a PageView with some children, and in this children place some TextFields.

Example code: https://gist.github.com/dhafinrayhan/a63f94e0bb09ed7a2334c09c79012f14

Expected results

On iPhone, If I swipe left/right on the TextFields, the PageView should change page like it happens on Android.

Actual results

The page doesn't change.

Code sample

import 'package:flutter/material.dart';

/// Flutter code sample for [PageView].
void main() => runApp(const PageViewExampleApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('PageView Sample')),
        body: const PageViewExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();
    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      children: const <Widget>[
        Column(
          children: [
            Text('First Page'),
            TextField(),
          ],
        ),
        Column(
          children: [
            Text('Second Page'),
            TextField(),
          ],
        ),
        Column(
          children: [
            Text('Third Page'),
            TextField(),
          ],
        ),
      ],
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

[Paste your logs here]

Flutter Doctor output

Doctor output

[✓] Flutter (Channel stable, 3.16.8, on macOS 14.1 23B2073 darwin-arm64, locale en-US)
    • Flutter version 3.16.8 on channel stable at /Users/lucagiordano/development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 67457e669f (2 weeks ago), 2024-01-16 16:22:29 -0800
    • Engine revision 6e2ea58a5c
    • Dart version 3.2.5
    • DevTools version 2.28.5

[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/lucagiordano/Library/Android/sdk
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • 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.7+0-17.0.7b1000.6-10550314)

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

[✓] Connected device (5 available)
    • CLT L29 (mobile)           • WCR7N18B15009630                     • android-arm64  • Android 10 (API 29)
    • iPhone audimex LG (mobile) • 00008110-000C05E126A8201E            • ios            • iOS 17.2.1 21C66
    • iPhone 15 Pro (mobile)     • 595F703B-FAF7-4DF0-A27A-66F2D7722235 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-17-2 (simulator)
    • macOS (desktop)            • macos                                • darwin-arm64   • macOS 14.1 23B2073 darwin-arm64
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 121.0.6167.85
    ! Error: Browsing on the local area network for MHiphone14. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)
    ! Error: Browsing on the local area network for iPhone di Luca. Ensure the device is unlocked and attached with a cable or associated with the same local area network as this Mac.
      The device must be opted into Developer Mode to connect wirelessly. (code -27)

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

! Doctor found issues in 1 category.

huycozy · 2024-02-01T08:29:20Z

Hi @giordy16

The page doesn't change.

Could you describe this in detail? I run your sample code and swipe left/right but the PageView still works normally. Could you share a demo video?

giordy16 · 2024-02-01T08:41:23Z

Sure, here the video of the problem on ios. If I swipe touching the TextField, the PageView doesn't change page. If I swipe on the rest of the widget it works normally.

On Android the swipe works even if i swipe above the TextField

Screen.Recording.2024-02-01.at.09.38.32.mov

huycozy · 2024-02-02T04:18:42Z

Thanks for sharing a demo, I can reproduce this on iOS too. Maybe related: #130224

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.16.9, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.16.9 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 41456452f2 (14 hours ago), 2024-01-25 10:06:23 -0800
    • Engine revision f40e976bed
    • Dart version 3.2.6
    • DevTools version 2.28.5

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/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.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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.7+0-17.0.7b1000.6-10550314)

[✓] 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (4 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D                         • android-arm64  • Android 11 (API 30)
    • iPhone (mobile)  • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios            • iOS 15.8 19H370
    • macOS (desktop)  • macos                                    • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome                                   • web-javascript • Google Chrome 120.0.6099.234

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

• No issues found!

[!] Flutter (Channel master, 3.19.0-14.0.pre.21, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.0-14.0.pre.21 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 6379378c88 (21 minutes ago), 2024-01-30 22:08:36 -0500
    • Engine revision 2d2d88068a
    • Dart version 3.4.0 (build 3.4.0-92.0.dev)
    • DevTools version 2.31.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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/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.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.3

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

[✓] Android Studio (version 2023.1)
    • Android Studio at /Applications/Android Studio Hedgehog.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.7+0-17.0.7b1000.6-10550314)

[✓] 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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 121.0.6167.85

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

! Doctor found issues in 1 category.

huycozy · 2024-03-25T11:27:28Z

I can reproduce this issue with an example without PageView. It's a Row of TextField(s) inside a SingleChildScrollView.

If the touchdown position is on a TextField, I can't scroll the Row. If the touchdown position is on the gap between fields, I can scroll the Row.

Sample code

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                _buildField(1),
                _buildField(2),
                _buildField(3),
                _buildField(4),
                _buildField(5),
                _buildField(6),
                _buildField(7),
                _buildField(8),
                _buildField(9),
              ],
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildField(int index) {
    return Container(
      width: 100,
      margin: const EdgeInsets.symmetric(horizontal: 4),
      color: Colors.amber,
      child: TextField(
        decoration: InputDecoration(hintText: 'Field $index'),
      ),
    );
  }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.19.4, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.19.4 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 68bfaea224 (29 hours ago), 2024-03-20 15:36:31 -0700
    • Engine revision a5c24f538d
    • Dart version 3.3.2
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58

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

• No issues found!

[!] Flutter (Channel master, 3.21.0-13.0.pre.20, on macOS 14.1 23B74 darwin-x64, locale en-VN)
    • Flutter version 3.21.0-13.0.pre.20 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 085dbd85f9 (3 hours ago), 2024-03-22 21:43:20 -0400
    • Engine revision 8a51e124fb
    • Dart version 3.4.0 (build 3.4.0-262.0.dev)
    • DevTools version 2.34.0-dev.12
    • 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 34.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15C500b
    • CocoaPods version 1.15.2

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

[✓] Android Studio (version 2023.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
    • android-studio-dir = /Applications/Android Studio.app/
    • Java version OpenJDK Runtime Environment (build 17.0.9+0-17.0.9b1087.7-11185874)

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

[✓] Connected device (3 available)
    • RMX2001 (mobile) • EUYTFEUSQSRGDA6D • android-arm64  • Android 11 (API 30)
    • macOS (desktop)  • macos            • darwin-x64     • macOS 14.1 23B74 darwin-x64
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 123.0.6312.58
    ! Error: iPhone has recently restarted. Xcode will continue when iPhone is unlocked. (code -14)

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

! Doctor found issues in 1 category.

I will re-title the issue so that others can find this one.

github-actions · 2024-05-16T04:01:05Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

huycozy added the in triage Presently being triaged by the triage team label Feb 1, 2024

huycozy added the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Feb 1, 2024

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 Feb 1, 2024

huycozy changed the title ~~PageView swipe doesn't work with TextField as a child on iOS~~ [iOS] PageView can not be moved if swipe over TextField child Feb 2, 2024

MitchellGoodwin added fyi-framework For the attention of Framework team P2 Important issues not at the top of the work list triaged-ios Triaged by iOS platform team labels Feb 5, 2024

goderbauer added the triaged-framework Triaged by Framework team label Feb 6, 2024

flutter-triage-bot bot removed fyi-framework For the attention of Framework team triaged-framework Triaged by Framework team labels Feb 7, 2024

jmagman added fyi-ios For the attention of iOS platform team team-text-input Owned by Text Input team and removed team-ios Owned by iOS platform team P2 Important issues not at the top of the work list labels Mar 12, 2024

flutter-triage-bot bot removed fyi-ios For the attention of iOS platform team triaged-ios Triaged by iOS platform team labels Mar 14, 2024

huycozy changed the title ~~[iOS] PageView can not be moved if swipe over TextField child~~ [iOS] Cannot scroll horizontally if swipe over TextField child Mar 25, 2024

huycozy mentioned this issue Mar 25, 2024

DropdownMenu prevents horizontal scrolling #145660

Closed

justinmc assigned Renzo-Olivares Mar 28, 2024

justinmc added P3 Issues that are less important to the Flutter project triaged-text-input Triaged by Text Input team labels Mar 28, 2024

Renzo-Olivares mentioned this issue Apr 30, 2024

Fix TextField horizontal drag conflicts #147341

Merged

9 tasks

Renzo-Olivares linked a pull request Apr 30, 2024 that will close this issue

Fix TextField horizontal drag conflicts #147341

Merged

9 tasks

auto-submit bot closed this as completed in #147341 May 1, 2024

auto-submit bot closed this as completed in 5181086 May 1, 2024

huycozy added the r: fixed Issue is closed as already fixed in a newer version label May 2, 2024

github-actions bot locked as resolved and limited conversation to collaborators May 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[iOS] Cannot scroll horizontally if swipe over TextField child #142624

[iOS] Cannot scroll horizontally if swipe over TextField child #142624

giordy16 commented Jan 31, 2024 •

edited by huycozy

huycozy commented Feb 1, 2024

giordy16 commented Feb 1, 2024

huycozy commented Feb 2, 2024

huycozy commented Mar 25, 2024

github-actions bot commented May 16, 2024

[iOS] Cannot scroll horizontally if swipe over TextField child #142624

[iOS] Cannot scroll horizontally if swipe over TextField child #142624

Comments

giordy16 commented Jan 31, 2024 • edited by huycozy

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

huycozy commented Feb 1, 2024

giordy16 commented Feb 1, 2024

huycozy commented Feb 2, 2024

huycozy commented Mar 25, 2024

github-actions bot commented May 16, 2024

giordy16 commented Jan 31, 2024 •

edited by huycozy