CupertinoTextSelectionToolbar clips all buttons when one of them is too long

Is there an existing issue for this?

I have searched the existing issues
I have read the guide to filing a bug

Steps to reproduce

Create a TextField with custom ContextMenuButtonItems
Set the second item's text to be very long

I set the text in the code sample to be excessively long to be able to reproduce this on devices with the default font size, but this is a big issue for accessibility users that increase their system font size as the button text needs to be way shorter than this for the bug to happen.

Expected results

The second item should be the only one clipped.

Actual results

All items after the second are clipped.

Code sample

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: Center(
          child: SizedBox(
            height: 400,
            width: 200,
            child: TextField(
              contextMenuBuilder: (context, state) =>
                  AdaptiveTextSelectionToolbar(
                anchors: state.contextMenuAnchors,
                children: [
                  ...AdaptiveTextSelectionToolbar.getAdaptiveButtons(
                    context,
                    [
                      ContextMenuButtonItem(
                        onPressed: () {},
                        label: 'Select all',
                      ),
                      ContextMenuButtonItem(
                        onPressed: () {},
                        label: 'Very very very very very very long text here',
                      ),
                      ContextMenuButtonItem(
                        onPressed: () {},
                        label: 'Other button',
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Screen.Recording.2023-11-09.at.17.45.13.mov

Logs

No response

Flutter Doctor output

Doctor output

[✓] Flutter (Channel beta, 3.16.0-0.3.pre, on macOS 13.2.1 22D68 darwin-x64, locale en-BR)
    • Flutter version 3.16.0-0.3.pre on channel beta at /usr/local/Caskroom/flutter/3.0.5/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 476aa717cd (3 weeks ago), 2023-10-19 20:10:52 -0500
    • Engine revision 91cde06da0
    • Dart version 3.2.0 (build 3.2.0-210.3.beta)
    • DevTools version 2.28.1

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0-rc4)
    • Android SDK at /Users/luccas/Library/Developer/Xamarin/android-sdk-macosx
    • Platform android-34, build-tools 34.0.0-rc4
    • 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 14.3.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E300c
    • CocoaPods version 1.11.3

[✓] 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.84.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.76.0

[✓] Connected device (3 available)
    • iPhone Xʀ (mobile) • 54553294-CF00-4B9D-B85D-8C8501385E77 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 13.2.1 22D68
      darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome
      119.0.6045.123

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

• No issues found!

Investigating a little bit more, I discovered a variable called firstPageWidth and though it was a little suspicious. I tried removing it and letting each page in the layout calculate its own width, and it's working!

All the tests related to CupertinoTextSelectionToolbar passed.

Reproducible using the code sample provided above.

In my testing, it seemed to happen when the long text was the second item. In other positions, the issue did not occur. See the recording below.

RPReplay_Final1699604884.MP4

flutter doctor -v

[!] Flutter (Channel stable, 3.13.9, on macOS 14.0 23A344 darwin-arm64, locale en-GB)
    • Flutter version 3.13.9 on channel stable at /Users/nexus/dev/sdks/flutter
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutters/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutter. Consider adding /Users/nexus/dev/sdks/flutter/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d211f42860 (2 weeks ago), 2023-10-25 13:42:25 -0700
    • Engine revision 0545f8705d
    • Dart version 3.1.5
    • DevTools version 2.25.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.1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode-15.0.0-Release.Candidate.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/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.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.3)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.0.4
    • Dart plugin version 232.10072.19

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

[✓] Connected device (3 available)
    • Nexus (mobile)  • 00008020-001875E83A38002E • ios            • iOS 17.1.1 21B91
    • macOS (desktop) • macos                     • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 119.0.6045.123
    ! Error: Browsing on the local area network for Dean’s iPad. 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.

[✓] Flutter (Channel master, 3.17.0-5.0.pre.39, on macOS 14.0 23A344 darwin-arm64, locale en-GB)
    • Flutter version 3.17.0-5.0.pre.39 on channel master at /Users/nexus/dev/sdks/flutters
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision d7bf0a8f3d (3 hours ago), 2023-11-10 01:00:32 -0500
    • Engine revision b020893cba
    • Dart version 3.3.0 (build 3.3.0-113.0.dev)
    • DevTools version 2.30.0-dev.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: /Users/nexus/Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
    • Xcode at /Applications/Xcode-15.0.0-Release.Candidate.app/Contents/Developer
    • Build 15A240d
    • CocoaPods version 1.13.0

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

[✓] Android Studio (version 2022.3)
    • Android Studio at /Users/nexus/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.6b829.9-10027231)

[✓] IntelliJ IDEA Ultimate Edition (version 2023.2.3)
    • IntelliJ at /Users/nexus/Applications/IntelliJ IDEA Ultimate.app
    • Flutter plugin version 76.0.4
    • Dart plugin version 232.10072.19

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

[✓] Connected device (3 available)
    • Nexus (mobile)  • 00008020-001875E83A38002E • ios            • iOS 17.1.1 21B91
    • macOS (desktop) • macos                     • darwin-arm64   • macOS 14.0 23A344 darwin-arm64
    • Chrome (web)    • chrome                    • web-javascript • Google Chrome 119.0.6045.123
    ! Error: Browsing on the local area network for Dean’s iPad. 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.

• No issues found!

@danagbemava-nc

@danagbemava-nc - is this a regression?

@HansMuller

Hi @HansMuller, this does not appear to be a regression.

I tested on 3.7.12, 3.10.6/7, 3.13.0 and it reproduced on all versions

@danagbemava-nc

@danagbemava-nc - Thanks for checking!
@LongCatIsLooong - even though this isn't a regression, it looks like a serious problem.

Looks like UIEditMenu does not limit the page width to that of the first page.

Fix CupertinoTextSelectionToolbar clipping (#138195)

@luccasclezar

@luccasclezar Does #138195 fix this issue? The title should also probably be renamed to 'CupertinoTextSelectionToolbar clips all buttons when one of them is too long'.

@victorsanni

@victorsanni Yes, it does. I thought this issue had been closed when the PR was merged, sorry.

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.

Navigation Menu

Repository navigation

CupertinoTextSelectionToolbar clips all buttons when one of them is too long #138177

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

CupertinoTextSelectionToolbar clips all buttons when one of them is too long #138177

Description

Is there an existing issue for this?

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

luccasclezar commented on Nov 9, 2023

danagbemava-nc commented on Nov 10, 2023

HansMuller commented on Nov 15, 2023

danagbemava-nc commented on Nov 16, 2023

HansMuller commented on Nov 16, 2023

LongCatIsLooong commented on Nov 16, 2023

victorsanni commented on Jul 17, 2024

luccasclezar commented on Jul 17, 2024

github-actions commented on Jul 31, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions