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, stretch?: boolean,
affixClass?: string, // class applied to prefix/postfix label affixClass?: string, // class applied to prefix/postfix label
firstInList?: boolean, // at the top of a list, no padding top firstInList?: boolean, // at the top of a list, no padding top
autoFocus?: boolean,
inputProps: { inputProps: {
disabled?: boolean, disabled?: boolean,
}, },
}; };
export class FormField extends React.PureComponent<Props> { 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() { render() {
const { const {
render, render,
@ -43,6 +58,7 @@ export class FormField extends React.PureComponent<Props> {
children, children,
stretch, stretch,
affixClass, affixClass,
autoFocus,
...inputProps ...inputProps
} = this.props; } = this.props;
@ -82,7 +98,7 @@ export class FormField extends React.PureComponent<Props> {
} else if (type === 'checkbox') { } else if (type === 'checkbox') {
input = <Toggle id={name} {...inputProps} />; input = <Toggle id={name} {...inputProps} />;
} else { } 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>
<div className="card__content"> <div className="card__content">
<FormField <FormField
autoFocus
label={ label={
(tipAmount && (tipAmount &&
tipAmount !== 0 && tipAmount !== 0 &&

View file

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

View file

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