Listen to Webview Events in Electron to enable Keyboard for webview input fields

Question

I am using electron-react-boilerplate as the base of my application. I have a webview inside the app that opens a URL and loads images from that url. There are inputs inside the webview and a keyboard needs to open on that webview for users so that they can enter the search criteria and enter for search. How can i achieve this?

import React, { useEffect, useRef } from 'react';

const CustomWebview = ({ id, src, style }: {id: string, src: string, style: any }) => {
  const webviewRef = useRef<any>(null);

  const injectFocusScript = (webview: any) => {
    if (!webview) return;

    webview.executeJavaScript(`
      (function waitForDocumentReady() {
        if (document && document.readyState === 'complete') {
          if (window.__focusListener) {
            document.removeEventListener('focusin', window.__focusListener);
          }

          window.__focusListener = (e) => {
            if (e.target && (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA')) {
              window.parent.postMessage({
                type: 'FROM_WEBVIEW',
                payload: {
                  tagName: e.target.tagName,
                  inputType: e.target.type || null,
                  id: e.target.id || null,
                  name: e.target.name || null,
                  classList: [...e.target.classList],
                }
              }, '*');
              console.log("message sent");
              // if (window.electron && window.electron.sendFocusToMain) {
              // console.log(window.electron);
                // window.electron.sendFocusToMain();
                // console.log("focus to main sent");
              // } else {
                // console.log("No window electron");
              // }
            }
          };

          document.addEventListener('focusin', window.__focusListener);
        } else {
          setTimeout(waitForDocumentReady, 100);
        }
      })();
    `).catch((err: any) => console.error('Script injection failed:', err));
  };

  useEffect(() => {
    const webview = webviewRef.current;

    if (!webview) return;

    window.addEventListener('message', (event) => {
      console.log("called" + event);
      if (event.data.type === 'FROM_WEBVIEW') {
        // 'webview-event', event.data.payload
        window.electron.sendFocusToMain();
        console.log("received message");
      }
    });

    const handleDidFinishLoad = () => injectFocusScript(webview);
    const handleDidNavigate = () => injectFocusScript(webview);
    const handleDidFrameFinishLoad = () => injectFocusScript(webview);

    webview.removeEventListener('did-finish-load', handleDidFinishLoad);
    webview.removeEventListener('did-navigate', handleDidNavigate);
    webview.removeEventListener('did-frame-finish-load', handleDidFrameFinishLoad);

    webview.addEventListener('did-finish-load', handleDidFinishLoad);
    webview.addEventListener('did-navigate', handleDidNavigate);
    webview.addEventListener('did-frame-finish-load', handleDidFrameFinishLoad);

    webview.addEventListener('dom-ready', () => {
      if (webview && webview.openDevTools) {
        // webview.openDevTools();
      }
    });

    return () => {
      webview.removeEventListener('did-finish-load', handleDidFinishLoad);
      webview.removeEventListener('did-navigate', handleDidNavigate);
      webview.removeEventListener('did-frame-finish-load', handleDidFrameFinishLoad);
      window.removeEventListener('message', () => {});
    };
  }, []);

  return (
    <webview
      ref={webviewRef}
      src={src}
      id={id}
      style={style}
      nodeintegration="false"
      webpreferences="contextIsolation=true"
    />
  );
};

export default CustomWebview;

this is the customWebView i wrote but nothing i try is allowing me to listen to the input or textarea focus?

Please guide me if i can listen to the input focus or any other way to achieve this?

I tried listening to the events inside the webview that can trigger the keyboard in the renderer but that is not working.