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

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.

CodePudding user response：

you don't need to addEventListner for blur like that in react you can try like this

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

CodePudding user response：

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."
    />
  )
}