Hi everyone,
This is my first post on dev.to
I started to learn react few months ago and i'm starting to get comfortable with it.
On my project I had an idea to use enter key to go to the next field in the form that is focusable (mimic tab functionality). I didn't want to use useRef on each field and manually adjust focus because it would be cumbersome.
Hook is called "useFocusOnEnter".
const useFocusOnEnter = (formRef) => {
const onEnterKey = (event) => {
if (event && event.keyCode && event.keyCode === 13 && event.target && event.target.form) {
const form = event.target.form;
const index = Array.prototype.indexOf.call(form, event.target);
for (let i = index + 1; i < formRef.current.length; i++) {
if (formRef.current[i].tabIndex === -1) {
continue
}
formRef.current[i].focus();
if (document.activeElement === formRef.current[i]) {
break;
}
}
}
}
return {onEnterKey};
}
export default useFocusOnEnter;
And to see it in action:
const FormComponent = ({stavka}) => {
const form = useRef();
const {onEnterKey} = useFocusOnEnter(form);
const handleSubmit = (e) => {
//handle submit
}
return (
<form ref={form} onKeyUp={event => onEnterKey(event)}>
<input autoFocus/>
<input />
<input />
<input />
<input />
<button type="button" onClick={handleSubmit}>Save</button>
</form>
);
}
export default FormComponent;
Thank you for reading
Top comments (0)