Focus the submit button (#3253)

Focus the submit button when confirmation modal is opened.

Also, changed cancellation link to button.
This makes the meaning clearer.

1 files changed, 17 insertions, 1 deletions

diff --git a/app/javascript/mastodon/components/button.js b/app/javascript/mastodon/components/button.js
index cc6482cde..aeb6b7c03 100644
--- a/app/javascript/mastodon/components/button.js
+++ b/app/javascript/mastodon/components/button.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 class Button extends React.PureComponent {
 
@@ -10,6 +11,7 @@ class Button extends React.PureComponent {
     block: PropTypes.bool,
     secondary: PropTypes.bool,
     size: PropTypes.number,
+    className: PropTypes.string,
     style: PropTypes.object,
     children: PropTypes.node,
   };
@@ -24,6 +26,14 @@ class Button extends React.PureComponent {
     }
   }
 
+  setRef = (c) => {
+    this.node = c;
+  }
+
+  focus() {
+    this.node.focus();
+  }
+
   render () {
     const style = {
       padding: `0 ${this.props.size / 2.25}px`,
@@ -32,11 +42,17 @@ class Button extends React.PureComponent {
       ...this.props.style,
     };
 
+    const className = classNames('button', this.props.className, {
+      'button-secondary': this.props.secondary,
+      'button--block': this.props.block,
+    });
+
     return (
       <button
-        className={`button ${this.props.secondary ? 'button-secondary' : ''} ${this.props.block ? 'button--block' : ''}`}
+        className={className}
         disabled={this.props.disabled}
         onClick={this.handleClick}
+        ref={this.setRef}
         style={style}
       >
         {this.props.text || this.props.children}