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

Does DropdownButton2 support keyboard for desktop apps #209

Closed
tkumark opened this issue Oct 22, 2023 · 6 comments
Closed

Does DropdownButton2 support keyboard for desktop apps #209

tkumark opened this issue Oct 22, 2023 · 6 comments
Labels
question Further information is requested

Comments

@tkumark
Copy link

tkumark commented Oct 22, 2023

I am making a dektop app. Does DropdownButton2 support keyboard selection? In the standard DropdownButton I can expand the menu by pressing the enter button and then use keyboard up and down to go to the item and to select press enter again. I tried your example code I could not do that.

@AhmedLSayed9
Copy link
Owner

Can you try the latest beta version?

@AhmedLSayed9 AhmedLSayed9 added the question Further information is requested label Oct 22, 2023
@tkumark
Copy link
Author

tkumark commented Oct 22, 2023

tried with the latest beta keyboard input is working thanks. any eta when it will be out of beta? thanks

@AhmedLSayed9
Copy link
Owner

I'm still thinking if we can add pagination or not.
It shouldn't take much time if we don't include pagination in the next release :)

@gusadolfo123
Copy link

gusadolfo123 commented Nov 19, 2023

tried with the latest beta keyboard input is working thanks. any eta when it will be out of beta? thanks

I have the same problem but I can't solve it with the beta, could you give me an example of the implementation you did :) in this moment need use DropdownButtonFormField2

@gusadolfo123
Copy link

gusadolfo123 commented Nov 20, 2023

I could solve it in the following way, I can that the DropdownButtonFormField2 does not allow me to select an element with the keyboard until it has not been previously selected, so I had to create an extension of DropdownItem that has the property focusNode which serves me to assign the focus programmatically to any element of the DropdownButtonFormField2. In my case I indicate that if there are no previously selected elements it assigns the focus to the first element of the list otherwise it maintains the focus to the element that at the moment has it.

CustomDropdownItem:

class CustomDropdownItem<T> extends DropdownItem<T> {
  final FocusNode focusNode;

  const CustomDropdownItem({
    super.key,
    required super.value,
    required super.child,
    required this.focusNode,
  });

  @override
  Widget build(BuildContext context) {
    return Focus(
      focusNode: focusNode,
      child: child,
    );
  }
}

Building the DropdownButtonFormField2 with the function onMenuStateChange:

onMenuStateChange: (isOpen) {
 if (isOpen) {
            final CustomDropdownItem<T>? newVal =
                selectedItem ?? (widget.items.isNotEmpty ? widget.items.first : null);
            if (newVal != null) {
              Future.delayed(const Duration(milliseconds: 100), () {
                if (widget.items.length > 1) {
                  if (newVal.focusNode.hasPrimaryFocus || newVal.focusNode.canRequestFocus) {
                    FocusScope.of(context).requestFocus(newVal.focusNode);
                  }
                }
              });
            }
          }
},

Result:
mobile123

@AhmedLSayed9
Copy link
Owner

Closing in favor of #339

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

3 participants