AutoFocus form-fields #1977

Merged
btzr-io merged 2 commits from auto-focus into master 2018-09-22 04:30:12 +02:00
4 changed files with 20 additions and 1 deletions
Showing only changes of commit fcbe52cdea - Show all commits

View file

@ -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} />;
}
}

View file

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

View file

@ -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"

View file

@ -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"