Clear email field on send

Author: DaneEveritt

resources/scripts/components/auth/ForgotPasswordContainer.tsx

@@ -18,6 +18,8 @@ type State = Readonly<{
 }>;
 
 class ForgotPasswordContainer extends React.PureComponent<Props, State> {
+    emailField = React.createRef<HTMLInputElement>();
+
     state: State = {
         email: '',
         isSubmitting: false,
@@ -33,9 +35,15 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
         this.setState({ isSubmitting: true }, () => {
             this.props.clearAllFlashMessages();
             requestPasswordResetEmail(this.state.email)
-                .then(response => this.props.pushFlashMessage({
-                    type: 'success', title: 'Success', message: response,
-                }))
+                .then(response => {
+                    if (this.emailField.current) {
+                        this.emailField.current.value = '';
+                    }
+
+                    this.props.pushFlashMessage({
+                        type: 'success', title: 'Success', message: response,
+                    });
+                })
                 .catch(error => {
                     console.error(error);
                     this.props.pushFlashMessage({
@@ -54,6 +62,7 @@ class ForgotPasswordContainer extends React.PureComponent<Props, State> {
                 <form className={'login-box'} onSubmit={this.handleSubmission}>
                     <div className={'-mx-3'}>
                         <OpenInputField
+                            ref={this.emailField}
                             id={'email'}
                             type={'email'}
                             label={'Email'}

resources/scripts/components/forms/OpenInputField.tsx

@@ -6,7 +6,7 @@ type Props = React.InputHTMLAttributes<HTMLInputElement> & {
     description?: string;
 };
 
-export default ({ className, description, onChange, label, ...props }: Props) => {
+export default React.forwardRef<HTMLInputElement, Props>(({ className, description, onChange, label, ...props }, ref) => {
     const [ value, setValue ] = React.useState('');
 
     const classes = classNames('input open-label', {
@@ -16,6 +16,7 @@ export default ({ className, description, onChange, label, ...props }: Props) =>
     return (
         <div className={'input-open'}>
             <input
+                ref={ref}
                 className={classes}
                 onChange={e => {
                     setValue(e.target.value);
@@ -33,4 +34,4 @@ export default ({ className, description, onChange, label, ...props }: Props) =>
             }
         </div>
     );
-};
+});