window.onblur event in react js not getting invoked in android webview

Question

Code given below works perfectly in PC, Laptop, Tab, and Mobile Browsers. This code detects whether the user is opening another tab or other document or losing focus of the current browser window. But if we build a web app from this code using android web-view then this does not work at all.

import React,{useEffect} from 'react';

function App() {
useEffect(() =>
{
const onBlurCallback = () => onBlur();
window.addEventListener('blur', onBlurCallback);
return () =>
{
window.removeEventListener('blur', onBlurCallback);
};
}, []);

return (
<div className="App">

</div>
);
}

function onBlur()
{
alert('hello');
}

export default App;

Please suggest a solution that will work in the android web-view also.

Answer 1

You don't need to use addEventListner for the blur like that in React. You can try it like this:

<input type="text" onBlur={()=> //... your function here} />

Answer 2

Recommend Link: Official Document

You can use the onBlur function by adding it as an attribute of the <input /> .

function Example() {
  return (
    <input
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onBlur is triggered when you click this input and then you click outside of it."
    />
  )
}