Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DropdownButton] Fix highlight behavior #94605

Open
TahaTesser opened this issue Dec 3, 2021 · 4 comments
Open

[DropdownButton] Fix highlight behavior #94605

TahaTesser opened this issue Dec 3, 2021 · 4 comments
Labels
f: focus Focus traversal, gaining or losing focus f: material design flutter/packages/flutter/material repository. found in release: 2.6 Found to occur in 2.6 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team triaged-design Triaged by Design Languages team

Comments

@TahaTesser
Copy link
Member

TahaTesser commented Dec 3, 2021

DropdownButtonFormField highlights and unhighlight quickly when tapping

Expected behavior

Widget should be once and should stay highlighted until focus is moved to another widget

minimal code sample
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _State createState() => _State();
}

class _State extends State<MyHomePage> {
  int? dropdownValue = 1;
  final List<int> hugeMenuItems = List<int>.generate(100, (int index) => index);
  late FocusNode focusNode;

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();
  }

  @override
  void dispose() {
    focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Title'),
      ),
      body: Column(
        children: <Widget>[
          const TextField(),
          DropdownButton(
              focusNode: focusNode,
              value: dropdownValue,
              onTap: () {
                print('FocusNode has focus: ${focusNode.hasPrimaryFocus}');
              },
              items: hugeMenuItems.map<DropdownMenuItem<int>>((int item) {
                return DropdownMenuItem<int>(
                  key: ValueKey<int>(item),
                  value: item,
                  child: Text(item.toString(),
                      key: ValueKey<String>('Text $item')),
                );
              }).toList(),
              onChanged: (int? value) {
                setState(() => dropdownValue = value);
              }),
        ],
      ),
    );
  }
}

Also address #93716 (comment)

@TahaTesser TahaTesser changed the title [Material] Since Dropdown request when tapping, it effects DropdownButtonFormField [Material] When tapping on DropdownButtonFormField, dropdown stays highlighted Dec 3, 2021
@TahaTesser TahaTesser added f: focus Focus traversal, gaining or losing focus f: material design flutter/packages/flutter/material repository. framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on c: regression It was better in the past than it is now found in release: 2.6 Found to occur in 2.6 labels Dec 3, 2021
@TahaTesser TahaTesser self-assigned this Dec 3, 2021
@TahaTesser TahaTesser added this to To do in Nevercode via automation Dec 13, 2021
@TahaTesser TahaTesser moved this from To do to In progress in Nevercode Dec 13, 2021
@bernaferrari
Copy link
Contributor

Ideally it would support TextInputAction.go or something like that.

@TahaTesser
Copy link
Member Author

Highlight is working as intended as it seems, it should stay highlighted, see

The main issue is the highlight is not smooth or persistent

@TahaTesser TahaTesser changed the title [Material] When tapping on DropdownButtonFormField, dropdown stays highlighted [DropdownButton] Fix highlight behavior Jan 31, 2022
@TahaTesser
Copy link
Member Author

TahaTesser commented Jan 31, 2022

Looks like focus moves away whenever there is new route (here when popup shows up in a route)

navigator.push(_dropdownRoute!).then<void>((_DropdownRouteResult<T>? newValue) {
_removeDropdownRoute();
if (!mounted || newValue == null)
return;
widget.onChanged?.call(newValue.result);
});

I think it is core framework issue than this widget

I don't think this is a regression since this behavior can be observed before the dropdowbutton PR landed

@flutter-triage-bot
Copy link

This issue is missing a priority label. Please set a priority label when adding the triaged-design label.

@HansMuller HansMuller added the triaged-design Triaged by Design Languages team label Aug 23, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
f: focus Focus traversal, gaining or losing focus f: material design flutter/packages/flutter/material repository. found in release: 2.6 Found to occur in 2.6 framework flutter/packages/flutter repository. See also f: labels. has reproducible steps The issue has been confirmed reproducible and is ready to work on team-design Owned by Design Languages team triaged-design Triaged by Design Languages team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants