disabling keyPress for enter on same value multiple times

Question

I have a onChange and onKeyPress events for an input field, where when the user presses enter only I want call the API. And if no change in character then I don't want to trigger the API call.

const [searchValue, setSearchValue] = useState('')

handleChange = (e) => {
  setSearchValue(e.target.value)
}

handleKeyPress = (e) => {
 let charCode = event.keyCode;
    if (charCode === 13) {
      getData();
    }
}


return(
 <input 
  onChange={handleChange}
  onKeyPress={handleKeyPress}
/>
)

So if user types 'a' and press on enter it should call API, but on second time user press enter it should not call API, since no character has been changed . So how can I block that if value is same. I have checked e.target.value !== searchValue inside handleKeyPress but didn't worked

Any help is appreciated

Why it didn't work ? Could you give more details about what you have tried ? — Peterrabbit, Mar 21 '22 at 18:36
const handleKeyPress = ({charCode, target : { value }}) => { if (charCode === 13 && searchValue !=value ) { getData(); } setSearchValue(value) } Remove onChane and do like this. — Darshan Sachaniya, Mar 21 '22 at 18:42
https://codesandbox.io/s/nifty-browser-yqn4bm, type 'a' and hit enter two times you can see its calling getData function, I have commented the code which I do the early return — dev, Mar 21 '22 at 18:42
`e.target.value !== searchValue` this didn't work because onChange will call before and set the latest value in state. So onKeyPress it always be the same. — Darshan Sachaniya, Mar 21 '22 at 18:43
@DarshanSachaniya sure let me try, so you are suggesting we should not use onChange and onKeyPress, only we should use onKeyPress isn't — dev, Mar 21 '22 at 18:43
@DarshanSachaniya Warning: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`. I am getting like this when I removed onChange from input field — dev, Mar 21 '22 at 18:48
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243158/discussion-between-darshan-sachaniya-and-dev). — Darshan Sachaniya, Mar 21 '22 at 18:57
@DarshanSachaniya if you can post this answer it will be helpful for future reference also — dev, Mar 21 '22 at 18:57

Darshan Sachaniya · Answer 1 · 2022-03-21T19:11:46.723

1

e.target.value !== searchValue - this didn't work because onChange will call before and set the latest value in state so onKeyPress it always be the same.

Try to do like this:

const App = () => {
  const [searchValue, setSearchValue] = React.useState('')
  const handleKeyUp = ({charCode, target : { value }}) => {
    if (charCode === 13 && searchValue !=value ) {
      console.log("get Data")
    }
    setSearchValue(value)
  }
  return(
      <input keyup={handleKeyUp}/>
  )
}

edited Mar 21 '22 at 19:11

answered Mar 21 '22 at 19:01

Darshan Sachaniya

389
2
17

One doubt, when i type 'a' on input field, I am not able to get that, so if I put a console.log(event.target.value) on handleKeyPress its giving me empty string? Why is that happening https://codesandbox.io/s/friendly-jackson-t4oiym – dev Mar 21 '22 at 19:02
We have already extracted the value from an event ( target : { value }). Just write console.log(value). You will get it. – Darshan Sachaniya Mar 21 '22 at 19:04
Nope i am logging console.log(value) only, check the sandbox, and see the console of codesandbox – dev Mar 21 '22 at 19:06
1

We need to use onKeyUp https://stackoverflow.com/a/56248972/10829671 check this – dev Mar 21 '22 at 19:09
But then its not working searchValue !=value, since both are same it doesn't trigger the API call – dev Mar 21 '22 at 19:13
1

I think i need to use form tag because these has lot of issues, won't be able to handle it, because I need to use onChange and value to have a controlled field – dev Mar 21 '22 at 19:19
Let me try with onChange and onKeyUp, i will update if I am able to without using form tag – dev Mar 21 '22 at 19:24
I was able to achieve this, by adding one more state variable as prevSearchString: '', so will compare with searchString !== prevSearchString, So this will work :) – dev Mar 21 '22 at 20:39

disabling keyPress for enter on same value multiple times

1 Answers1