[ButtonBase] Ensure that onClick propagates when non-native button is clicked

Author: silviuaavram

packages/mui-material/src/ButtonBase/ButtonBase.js

@@ -219,9 +219,7 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
       !disabled
     ) {
       event.preventDefault();
-      if (onClick) {
-        onClick(event);
-      }
+      event.currentTarget.click();
     }
   });
 
@@ -239,13 +237,12 @@ const ButtonBase = React.forwardRef(function ButtonBase(inProps, ref) {
 
     // Keyboard accessibility for non interactive elements
     if (
-      onClick &&
       event.target === event.currentTarget &&
       isNonNativeButton() &&
       event.key === ' ' &&
       !event.defaultPrevented
     ) {
-      onClick(event);
+      event.currentTarget.click();
     }
   });
 

packages/mui-material/src/ButtonBase/ButtonBase.test.js

@@ -247,6 +247,46 @@ describe('<ButtonBase />', () => {
       fireEvent.mouseLeave(button);
       expect(onMouseLeave.callCount).to.equal(1);
     });
+
+ it('should propagate click events when Enter is pressed on non-native button', async () => {
+        const parentClickSpy = spy();
+        const buttonClickSpy = spy();
+
+        const {user} = render(
+          <div onClick={parentClickSpy}>
+            <ButtonBase onClick={buttonClickSpy} component="div">
+              Hello
+            </ButtonBase>
+          </div>,
+        );
+
+        // moves focus to the button
+        await user.tab()
+        await user.keyboard('{Enter}');
+
+        expect(buttonClickSpy.callCount).to.equal(1);
+        expect(parentClickSpy.callCount).to.equal(1);
+      });
+
+      it('should propagate click events when Space is released on non-native button', async () => {
+        const parentClickSpy = spy();
+        const buttonClickSpy = spy();
+
+        const {user} = render(
+          <div onClick={parentClickSpy}>
+            <ButtonBase onClick={buttonClickSpy} component="div">
+              Hello
+            </ButtonBase>
+          </div>,
+        );
+
+        // moves focus to the button
+        await user.tab();
+        await user.keyboard(' ');
+
+        expect(buttonClickSpy.callCount).to.equal(1);
+        expect(parentClickSpy.callCount).to.equal(1);
+      });
   });
 
   describe.skipIf(isJsdom())('ripple', () => {