Skip to content

Selection Handles Overlap Context Menu in SelectionArea #168765

Description

@leocirto

Steps to reproduce

Do the following (see code and video):

-- Wrap a Text widget in a SelectionArea widget
-- Long press on a word: the word will be selected and the context menu will open
-- Click on the 3-dot button to see the other context menu options: the selection handle/bubbles will be over the context menu

Some observations:

-- The problem doesn't happen with the SelectableText widget, it only happens with SelectionArea
-- The problem disappears if the selection handle is moved after the long press (see video)

Related issue: #59229

Expected results

(see video)

Actual results

(see video)

Code sample

Code sample
void main() { runApp( const MyAppContextMenu() );  }

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

  @override
  Widget build(final BuildContext context) {
     return MaterialApp( home:
       Scaffold(
         appBar: AppBar( title: Text( 'Bug: $runtimeType' ), ),
         body:   const ContextMenuExample( )
     ) );
} }

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

  @override
  Widget build(final BuildContext context) {
  return Column( children: [

      const Text( 'SelectionArea\n(problem)', style: TextStyle( fontSize: 20 ), textAlign: TextAlign.center ),
      SelectionArea( child: const Text('Flutter is an open-source UI software development kit created by Google. It can be used to develop cross platform applications from a single codebase for the web,[4] Fuchsia, Android, iOS, Linux, macOS, and Windows.[5] First described in 2015,[6][7] Flutter was released in May 2017. Flutter is used internally by Google in apps such as Google Pay[8][9] and Google Earth[10][11] as well as other software developers including ByteDance[12][13] and Alibaba....'),
          contextMenuBuilder: ( final BuildContext context, final SelectableRegionState selectableRegionState ) {
               return contextMenuBuilderArea( ctx: context, selectableRegionState: selectableRegionState );
          },
      ),

      const Text( '\nSelectableText\n(no problem here)', style: TextStyle( fontSize: 20 ), textAlign: TextAlign.center ),
      SelectableText( 'Flutter is an open-source UI software development kit created by Google. It can be used to develop cross platform applications from a single codebase for the web,[4] Fuchsia, Android, iOS, Linux, macOS, and Windows.[5] First described in 2015,[6][7] Flutter was released in May 2017. Flutter is used internally by Google in apps such as Google Pay[8][9] and Google Earth[10][11] as well as other software developers including ByteDance[12][13] and Alibaba....',
          contextMenuBuilder: ( final BuildContext context, final EditableTextState editableTextState ) {
               return contextMenuBuilderText( ctx: context, editableTextState: editableTextState );
          },
      ),

  ] );
} }

AdaptiveTextSelectionToolbar contextMenuBuilderArea( {
          required final BuildContext ctx,
          required final SelectableRegionState selectableRegionState,
} ){
  final buttonItems = selectableRegionState.contextMenuButtonItems;
  final buttons     = AdaptiveTextSelectionToolbar.getAdaptiveButtons( ctx, buttonItems ).toList( );
  return AdaptiveTextSelectionToolbar(
    anchors: selectableRegionState.contextMenuAnchors,
    children: [
    // ADDING MANY BUTTONS TO MIMIC REAL DEVICES
       ... buttons,
       ... buttons,
       ... buttons,
    ]
  );
}

AdaptiveTextSelectionToolbar contextMenuBuilderText( {
          required final BuildContext ctx,
          required final EditableTextState editableTextState,
} ){
  final buttonItems = editableTextState.contextMenuButtonItems;
  final buttons     = AdaptiveTextSelectionToolbar.getAdaptiveButtons( ctx, buttonItems ).toList( );
  return AdaptiveTextSelectionToolbar(
    anchors: editableTextState.contextMenuAnchors,
    children: [ ... buttons, ... buttons, ... buttons, ]
  );
}

Screenshots or Video

Screenshots / Video demonstration

Image

context_menu_bug.webm

Logs

Logs

Flutter Doctor output

Doctor output
flutter doctor
[✓] Flutter (Channel stable, 3.29.3, on openSUSE Tumbleweed 6.13.0-1-default, locale en_US.UTF-8)
    • Dart version 3.7.2

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.1)
    • Platform android-35, build-tools 35.0.1
    • Java version OpenJDK Runtime Environment (build 21.0.4+-12422083-b607.1)

[✓] Connected device (2 available) [120ms]
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 15 (API 35) (emulator)

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: qualityA truly polished experiencef: selectionSelectableRegion, SelectionArea, SelectionContainer, Selectable, and related APIsfound in release: 3.29Found to occur in 3.29found in release: 3.32Found to occur in 3.32frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-text-inputOwned by Text Input teamtriaged-text-inputTriaged by Text Input team

    Type

    No type
    No fields configured for issues without a type.

    Projects

    Status
    Done

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions