AutoFocus form-fields #1977
4 changed files with 20 additions and 1 deletions
|
@ -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} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -83,6 +83,7 @@ class WalletSendTip extends React.PureComponent<Props, State> {
|
|||
</div>
|
||||
<div className="card__content">
|
||||
<FormField
|
||||
autoFocus
|
||||
label={
|
||||
(tipAmount &&
|
||||
tipAmount !== 0 &&
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue