Submitted 11 months ago

A React app with moving input focus after character limit

#react#vite

Arturo Simon• 1,785

@artimys

Preview site View code

This is a solution for...

Age calculator app

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I initially wrote this in normal HTML/CSS/JS but decided to switch over to React. I'm still learning it and decided to try out React hook form for this challenge.

I really like how the app came out. Some of the features include:

move focus to next input when char limit reached
[update] single digits convert to two digits when leaving input (blur event)
using setInterval and promises to get the count up effect.
responsive mobile first design

I welcome any feedback and pointers to good React practices. Major challenge I faced was letting go of the responsibility of updating the DOM and let React handle it.

ie. I'm using document.getElementById to move the focus to the next input when the character limit is reached but doesn't feel very React like. Is there another way?

Community feedback

NizarMjr• 390

@NizarMjr

Posted 11 months ago

@Arturo I like what you have done it's nice work Getting element from DOM with its ID is useful to focus on input however there is useRef hook could make same work ex : const inputRef = useRef(null) <input ref={inputRef} /> function () { //your js logic inputRef.current.focus()}

Arturo Simon• 1,785

@artimys

Posted 11 months ago

@NizarMjr Thanks for the feedback,

I was having some issues with useRef hook but I'm thinking it was related to ReactHookForms and then I found how to share the ref but trouble getting that as well.

Funny, found the solution in ReactHookForm's docs useFocus(). Did the trick.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord