Button component onKeyDown triggers onClick as well

[parkdoeui]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

When OnKeyDown event fires by pressing enter key, onClick event fires as well. Other keys don't cause the issue. Firing onClick event does not trigger onKeyDown though.

Demo: https://codesandbox.io/s/elated-blackburn-zwxpjm?file=/src/App.js

Expected behavior 🤔

OnKeyDown and onClick should fire separately when enter key is pressed.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

System: OS: macOS 11.4 CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz Memory: 3.59 GB / 32.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node Yarn: 3.1.0 - /usr/local/bin/yarn npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Managers: Homebrew: 3.4.6 - /usr/local/bin/brew pip3: 20.2.4 - ~/miniconda3/bin/pip3 RubyGems: 3.0.3 - /usr/bin/gem Utilities: Make: 3.81 - /usr/bin/make GCC: 4.2.1 - /usr/bin/gcc Git: 2.24.2 - /usr/bin/git Clang: 11.0.3 - /usr/bin/clang Servers: Apache: 2.4.46 - /usr/sbin/apachectl Virtualization: Docker: 20.10.7 - /usr/local/bin/docker IDEs: Nano: 2.0.6 - /usr/bin/nano VSCode: 1.69.2 - /usr/local/bin/code Vim: 8.2 - /usr/bin/vim Xcode: /undefined - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Perl: 5.30.2 - /usr/bin/perl PHP: 7.3.24 - /usr/bin/php Python: 3.8.5 - /Users/dopark/miniconda3/bin/python Python3: 3.8.5 - /Users/dopark/miniconda3/bin/python3 Ruby: 2.6.3 - /usr/bin/ruby Databases: MongoDB: 4.4.0 - /usr/local/bin/mongo SQLite: 3.33.0 - /Users/dopark/miniconda3/bin/sqlite3 Browsers: Chrome: 103.0.5060.134 Firefox: 86.0.1 Firefox Developer Edition: 103.0 Safari: 14.1.1 Monorepos: Yarn Workspaces: 3.1.0

[PunitSoniME]

@DoParkEQ

You can disable that thing by code as well

just replace your onKeyDown from onKeyDown={() => console.log("key");}

To this onKeyDown={(e) => { console.log("key"); e.preventDefault() }

e.preventDefault() will ignore onClick

[namanbarkiya]

Can I help with this? Please assign me.

[PunitSoniME]

@naman9199

You can directly create a PR.

[mnajdova]

This is the default behavior of the button element, we shouldn't change anything. Prove - https://codesandbox.io/s/determined-surf-sedrq4?file=/src/App.tsx As mentioned in https://github.com/mui/material-ui/issues/33821#issuecomment-1207347471 you can disable it in your code if you want to. I would be curious of why you would want to do it tough.