Hell here !
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 :)
CodePudding user response:
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;