[ButtonBase] Fix missing keyboard ripple (mui#8723)

the-noob · Nov 17, 2017 · 9cead46 · 9cead46
1 parent 5600980
commit 9cead46
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/docs/src/pages/demos/dialogs/AlertDialog.js b/docs/src/pages/demos/dialogs/AlertDialog.js
@@ -38,7 +38,7 @@ export default class AlertDialog extends React.Component {
             <Button onClick={this.handleRequestClose} color="primary">
               Disagree
             </Button>
-            <Button onClick={this.handleRequestClose} color="primary">
+            <Button onClick={this.handleRequestClose} color="primary" autoFocus>
               Agree
             </Button>
           </DialogActions>

diff --git a/docs/src/pages/demos/dialogs/ConfirmationDialog.js b/docs/src/pages/demos/dialogs/ConfirmationDialog.js
@@ -75,7 +75,7 @@ class ConfirmationDialog extends React.Component {
         <DialogTitle>Phone Ringtone</DialogTitle>
         <DialogContent>
           <RadioGroup
-            innerRef={node => {
+            ref={node => {
               this.radioGroup = node;
             }}
             aria-label="ringtone"

diff --git a/src/ButtonBase/ButtonBase.js b/src/ButtonBase/ButtonBase.js
@@ -270,12 +270,15 @@ class ButtonBase extends React.Component<ProvidedProps & Props, State> {
       return;
     }
 
-    if (this.button) {
-      event.persist();
-      const keyboardFocusCallback = this.onKeyboardFocusHandler.bind(this, event);
-      detectKeyboardFocus(this, this.button, keyboardFocusCallback);
+    // Fix for https://github.com/facebook/react/issues/7769
+    if (!this.button) {
+      this.button = event.currentTarget;
     }
 
+    event.persist();
+    const keyboardFocusCallback = this.onKeyboardFocusHandler.bind(this, event);
+    detectKeyboardFocus(this, this.button, keyboardFocusCallback);
+
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }