Merge pull request #1977 from lbryio/auto-focus

AutoFocus form-fields

CHANGELOG.md

@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/).
 ## [Unreleased]
 
 ### Added
+* Allow typing of encryption password without clicking entry box ([#1977](https://github.com/lbryio/lbry-desktop/pull/1977))
 
 ### Changed
 

src/renderer/component/common/form-components/form-field.jsx

@@ -24,12 +24,27 @@ type Props = {
   stretch?: boolean,
   affixClass?: string, // class applied to prefix/postfix label
   firstInList?: boolean, // at the top of a list, no padding top
+  autoFocus?: boolean,
   inputProps: {
     disabled?: boolean,
   },
 };
 
 export class FormField extends React.PureComponent<Props> {
+  constructor(props) {
+    super(props);
+    this.input = React.createRef();
+  }
+
+  componentDidMount() {
+    const { autoFocus } = this.props;
+    const input = this.input.current;
+
+    if (input && autoFocus) {
+      input.focus();
+    }
+  }
+
   render() {
     const {
       render,
@@ -43,6 +58,7 @@ export class FormField extends React.PureComponent<Props> {
       children,
       stretch,
       affixClass,
+      autoFocus,
       ...inputProps
     } = this.props;
 
@@ -82,7 +98,7 @@ export class FormField extends React.PureComponent<Props> {
       } else if (type === 'checkbox') {
         input = <Toggle id={name} {...inputProps} />;
       } else {
-        input = <input type={type} id={name} {...inputProps} />;
+        input = <input type={type} id={name} {...inputProps} ref={this.input} />;
       }
     }
 

src/renderer/component/walletSendTip/view.jsx

@@ -83,6 +83,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
         </div>
         <div className="card__content">
           <FormField
+            autoFocus
             label={
               (tipAmount &&
                 tipAmount !== 0 &&

src/renderer/modal/modalWalletEncrypt/view.jsx

@@ -96,6 +96,7 @@ class ModalWalletEncrypt extends React.PureComponent<Props> {
           <FormRow padded>
             <FormField
               stretch
+              autoFocus
               error={passwordMismatch === true ? 'Passwords do not match' : false}
               label={__('New Password')}
               type="password"

src/renderer/modal/modalWalletUnlock/view.jsx

@@ -51,6 +51,7 @@ class ModalWalletUnlock extends React.PureComponent<Props> {
           <FormRow padded>
             <FormField
               stretch
+              autoFocus
               error={walletUnlockSucceded === false ? 'Incorrect Password' : false}
               label={__('Wallet Password')}
               type="password"