Show an alert when a user stops typing in ReactJS

Question

I want to show an alert message in ReactJS when the user stops typing in a a form field.

You need not to think specific to reactjs in this situation. This is to be done with pure js way with a listener on input box. — Deepak, Apr 03 '19 at 20:03
Sure , it will be no problem . If this can be done with pure JS . it will be ok — Jon, Apr 03 '19 at 20:04
Do you mean an alert dialog box, that's not going to be very nice UI. If you mean some form of alert info box, that wouldn't be too bad. — Keith, Apr 03 '19 at 20:06
I mean to say when User stopped typing I want to display alert message — Jon, Apr 03 '19 at 20:06
This should give you the answer, as others have said it's not specific to React: https://stackoverflow.com/questions/1909441/how-to-delay-the-keyup-handler-until-the-user-stops-typing?rq=1 — Joru, Apr 03 '19 at 20:09
@Jon you only need the first part of that answer - the `delay` function. That will be your React event handler. — Joru, Apr 03 '19 at 20:14

Abdelkarim EL AMEL · Accepted Answer · 2019-04-04T19:36:22.633

6

This can help you.

This kind of features are not React specific, so you can achieve that in many ways with JS.

Simple component :

    class App extends Component {
      typingTimer = null;

     handleChange = (evt) => {
       const val = evt.target.value;
       clearTimeout(this.typingTimer);
       this.typingTimer = setTimeout(() => {
        if (val) {
          window.alert('Stopped typing !');
        }
       }, 500);
     }
     componentWillUnmount() {
       clearTimeout(this.typingTimer);
     }
      render() {
        return (
          <div>
            <input onChange={this.handleChange} /> 
          </div>
        );
      }
    }

edited Apr 04 '19 at 19:36

answered Apr 03 '19 at 20:19

Abdelkarim EL AMEL

1,515
1
10
10

1

The main contents of your answer appear to be located at your link. [To make your answer robust, please copy the relevant information from your link into your answer](https://meta.stackexchange.com/a/8259/133286). – Conspicuous Compiler Apr 03 '19 at 20:44
1

That's great. Thank you for the improvement @AbdelkarimELAMEL . – Conspicuous Compiler Apr 03 '19 at 21:05
1

@AbdelkarimELAMEL . Can you please help me how to stop alert when user remove text from input . Here When I stopped the typing alert is working fine but when I removed text from input it occur again . I just want to show alert on stopping typing not like user removed text – Jon Apr 04 '19 at 16:33

score 2 · Answer 2 · answered Jun 14 '20 at 07:33

Here, I created React functional component for my use.

const App = () => {
  let typingTimer = null;

  const makeAnApiCall =(inputValue) => {
        console.log("Making an Ajax Call");
        window.alert('Making an Ajax Call');
    }
  
  const handleChange = (evt) => {
    const val = evt.target.value;
    clearTimeout(typingTimer);
    typingTimer = setTimeout(() => {
      if (val) {
        makeAnApiCall(val)
      }
    }, 500);
  }

  useEffect(() => {
    return () => {
      clearTimeout(typingTimer);
    }
  }, [])

    return (
      <div>
        <input type="text" onChange={handleChange} /> 
      </div>
    );
}

Workgin demo on stackblitz

Show an alert when a user stops typing in ReactJS

2 Answers2