How can I track when a user uses an input field to stop the backend from updating an input field when user is typing?

Garry Tiscovschi 0
Viewed 49

Often our database updates the forms/files/input fields that our users are working on live (e.g. a background job updates the fields with new info).

The form updates right in front of their eyes which they enjoy.

However if they're typing into a specific input field as the update runs, whatever they were typing in that moment gets overwritten, which is annoying.

We would rather whatever the user was writing would take priority and overwrite what the db is pushing upwards into that input field.

A solution I'm hoping for is temporarily storing whatever the user is typing in case an update happens so that we can put that local state back into the input field after they finish typing. This should overwrite whatever the db sent.

How would you do this?

Is it possible to somehow track which input field the user is touching and just protect that specific input field from the db field and not the other fields not currently being modified by the user?

E.g something like this: (I'm mixing in pseudo code here):

<Input
  disabled={!canEdit}
  value={

     if(userIsTypingHere){
      currentLocalInput
     } 
     else{dbData?.docTitle


    }
  placeholder="Title (mandatory)"
  fontSize={'xl'}
  isInvalid={!dbData?.title}
  onChange={(e) =>
    setOurDoc({
      ...dbData,
      docTitle: e.target.value,
    })
  }
/>

<Input
  disabled={!canEdit}
  value={

     if(userIsTypingHere){
      currentLocalInput
     } 
     else{dbData?.docDecription


    }
  placeholder="Title (mandatory)"
  fontSize={'xl'}
  isInvalid={!dbData?.description}
  onChange={(e) =>
    setOurDoc({
      ...dbData,
      docTitle: e.target.value,
    })
  }
/>

The alternative is storing the state from the backend, a temporary holding state and a final state that is presented to the user. But this could get messy quickly and I would rather use the solution above.

Thoughts? ** Extra Info:** We're using: NextJs Chakra UI

Side note: After this is done if the user input overwrites the db update this new input is saved to the db automatically and so will stay persistent.

react-hooks next.js input reactjs
1 Answers

It seems like 'userIsTypingHere' should act like dirty flag - set it on true when the user starts typing - on change, and back on false when the input is blurred, or maybe after a few seconds, or on save - depending on your business case. You'd probably need a state for your controlled input.

You could update the input in a useEffect if the userIsTypingHere is false.

I see it something like this:

const [userIsTypingHere, setUserIsTypingHere] = useState(false); 
const [currentLocalInput, setCurrentLocalInput] = useState(false);  

useEffect(() => {
  if(!userIsTypingHere) setCurrentLocalInput(dbValue);
}, [dbValue]);

return (
  <Input 
     value={userIsTypingHere ? currentLocalInput : dbValue}
     onChange={(e) => {setUserIsTypingHere(true); setCurrentLocalInput(e.target.value);}}
     onBlur={(e) => {setUserIsTypingHere(false); doStuff(); }} // save to backend or manage conflict
   />
Lala0
Related