Skip to content

ExpansionPanel mouse cursor changes when hovering the expand/collapse icon when ExpansionPanel.canTapOnHeader is true #155207

Description

@benji-farquhar

Steps to reproduce

Set ExpansionPanel.canTapOnHeader = true, then hover over the ExpansionPanel header on web, the mouse cursor will change from the "hand" to the usual mouse arrow shape while hovering over the expand/collapse icon.

I did a fix for another issue in 147098, that would have fixed this, but @TahaTesser removed the IgnorePointer and fixed that issue in another way, however that has resulted in this bug. Disabling the Expand/collapse IconButton when canTapOnHeader is true, and trying to put a band-aid on it like changing the disabled color was never going to be a good solution due to all the undesirable side effects that entails, and it has been the cause of multiple user experience bugs. IgnorePointer will need to be used in the end anyway.

What do we think IgnorePointer was made for? Here is the example in the docs:

The following sample has an IgnorePointer widget wrapping the Column which contains a button. When ignoring is set to true anything inside the Column can not be tapped. When ignoring is set to false anything inside the Column can be tapped.

Expected results

The mouse cursor is always the hand on the whole ExpansionPanel header.

Actual results

The mouse cursor changes from the "hand" to the usual mouse arrow shape while hovering over the expand/collapse icon.

Code sample

Code sample
import 'package:flutter/material.dart';

/// Flutter code sample for [ExpansionPanelList].

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

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

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

// stores ExpansionPanel state information
class Item {
  Item({
    required this.expandedValue,
    required this.headerValue,
    required this.value,
    required this.canTapOnHeader,
  });

  String expandedValue;
  String headerValue;
  int value;
  bool canTapOnHeader;
}

List<Item> generateItems(int numberOfItems) {
  return List<Item>.generate(numberOfItems, (int index) {
    bool canTapOnHeader = index > 3;
    return Item(
      headerValue: 'Panel $index canTapOnHeader=${canTapOnHeader.toString()}',
      expandedValue: 'This is item number $index',
      value: index,
      canTapOnHeader: canTapOnHeader,
    );
  });
}

class ExpansionPanelListExample extends StatefulWidget {
  const ExpansionPanelListExample({super.key});

  @override
  State<ExpansionPanelListExample> createState() =>
      _ExpansionPanelListExampleState();
}

class _ExpansionPanelListExampleState extends State<ExpansionPanelListExample> {
  final List<Item> _data = generateItems(8);

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
        child: _buildPanel(),
      ),
    );
  }

  Widget _buildPanel() {
    return ExpansionPanelList.radio(
      children: _data.map<ExpansionPanelRadio>((Item item) {
        return ExpansionPanelRadio(
          headerBuilder: (BuildContext context, bool isExpanded) {
            return ListTile(
              title: Text(item.headerValue),
            );
          },
          body: ListTile(
              title: Text(item.expandedValue),
          ),
          value: item.value,
          canTapOnHeader: item.canTapOnHeader,
        );
      }).toList(),
      expandIconColor: Colors.red,
    );
  }
}

Screenshots or Video

No response

Logs

No response

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.24.0, on macOS 14.6.1 23G93 darwin-arm64, locale en-GB)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2024.1)
[✓] IntelliJ IDEA Community Edition (version 2024.2.1)
[✓] VS Code (version 1.93.0)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

Activity

  1. changed the title [-]ExpansionPanel mouse cursor changes when hovering the expand/collapse icon ExpansionPanel.canTapOnHeader is true[/-] [+]ExpansionPanel mouse cursor changes when hovering the expand/collapse icon when ExpansionPanel.canTapOnHeader is true[/+] on Sep 14, 2024
  2. darshankawar commented on Sep 16, 2024

    @darshankawar
    Member

    The reported behavior occurs as below on latest stable and master versions:

    155207.mov
    Stable : 3.24.3
    Master: 3.26.0-1.0.pre.129
    
  3. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    team-designOwned by Design Languages team
    and removed
    in triagePresently being triaged by the triage team
    on Sep 16, 2024
  4. YeungKC commented on Nov 1, 2024

    @YeungKC
    Member

    @BenjiFarquhar It looks like this has already been fixed in #155209. Should we close this issue?

  5. benji-farquhar commented on Nov 1, 2024

    @benji-farquhar
    ContributorAuthor

    @YeungKC Yep 🙂

  6. added
    r: fixedIssue is closed as already fixed in a newer version
    on Nov 4, 2024
  7. github-actions commented on Nov 18, 2024

    @github-actions

    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.

  8. locked as resolved and limited conversation to collaborators on Nov 18, 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 listfound in release: 3.24Found to occur in 3.24found in release: 3.26Found to occur in 3.26frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages teamwaiting for PR to land (fixed)A fix is in flight

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions