Unfocus input after submit react-hook-form in Typescript-React project

Question

I'm on TS-React project, i got some inputs where scanning some barecode value. I'm using react-hook-form and the useForm Hook. I got some little form (one input-text and one submit button) in a global form and i want to have an automation, when i press "Enter" on keyboard an action/event sends some fetch, or others.

With the and {handleSubmit} = useForm() , it work perfectly but, my input stay in focused and i need lost this focus...

So, how can i do this action ? i saw the blur() function but i didn't success to target my input from the handleSubmit function

import {Controller, useForm} from "react-hook-form"

const BasketContainer: FC = () => {

const { control, handleSubmit, setValue, watch, getValues, reset, formState: {errors}} = useForm<Basket>()


const handleScanIdSubmit = (data: any) => {
    // Here my blur action
  }

return (
  <form onSubmit={handleSubmit(handleScanIdSubmit)}>
          <Controller
            render={({field: {ref, ...rest}}) => (
              <InputText  {...rest}
                          type={"text"}
                          label={"ID"}
                          errorMessage={errors.scanId.message}
              />)}
            control={control}
            name="scanId"
            defaultValue={""}
            rules={{required: "Field required"}}
          />

          <Button type="submit"     
          />
            
        </form>

In advance, thanks for helps contributions :)

MORÈ · Accepted Answer · 2022-06-10 14:03:48Z

1

You can do it in a traditional way by calling blur() on an active element.

const handleScanIdSubmit = (data: any) => {
   document.activeElement.blur();
}

Or you can create a reference with useRef;

import {Controller, useForm, useRef} from "react-hook-form"

const BasketContainer: FC = () => {
  const controlReference = useRef(null);
  const { control, handleSubmit, setValue, watch, getValues, reset, formState: {errors}} = useForm<Basket>();
  const handleScanIdSubmit = (data: any) => {
    controlReference.current.blur();
  }
  return (
    <form onSubmit={handleSubmit(handleScanIdSubmit)}>
      <Controller
        render={({field: {ref, ...rest}}) => (
          <InputText  {...rest}
            type={"text"}
            label={"ID"}
            ref={controlReference}
            errorMessage={errors.scanId.message}
          />)}
        control={control}
        name="scanId"
        defaultValue={""}
        rules={{required: "Field required"}}
      />
      <Button type="submit"/>
    </form>
  );
}

[update]

with typescript

import {useRef} from 'react';

function App() {
  const controlReference = useRef(null);
  const handleSubmit = async (e:React.ChangeEvent<any>) => {
    e.preventDefault()
      //with typescript
      if (document.activeElement instanceof HTMLElement) {
        document.activeElement.blur();
      }
      // controlReference.current.blur();
  }
  return (
    <div className="App">
      <label><textarea name="reply" ></textarea></label>
      <div>
        <button ref={controlReference} onClick={handleSubmit}>Submit</button>
      </div>
    </div>
  );
}

export default App;

edited Jun 10, 2022 at 14:03

answered Jun 10, 2022 at 10:48

MORÈ

2,5823 gold badges20 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KaraStras J.B Over a year ago

Thanks to you , with solution 1 , it works but i got a warning "Property 'blur' does not exist on type 'Element' I find solution here github.com/Microsoft/TypeScript/issues/5901 use (document.activeElement as HTMLElement).blur() or this one if (document.activeElement instanceof HTMLElement) { document.activeElement.blur() } with Typescript Maybe u can update your answer for the typescript context

Collectives™ on Stack Overflow

Unfocus input after submit react-hook-form in Typescript-React project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related