I'm creating a WebView App for my website using "electron" and I wanted to have tabbed windows in it, I choose "electron-navigation" which was working fine, but inside the WebView my website's input elements didn't work except "select" element and some of them starts working when I "blur" the WebView i.e. I focus on other application or desktop and refocus it starts working but textarea never works …. please help me
I tried looking for the solution inside code but I couldn't find any idea, and I also googled whole night but no luck
This is Index.html
<div id="nav-body-tabs"></div>
<div id="nav-body-ctrls"></div>
<div id="nav-body-view-wrapper">
<div id="nav-body-views"></div>
</div>
this is index.js
const path = require('path')
const url = require('url')
const { ipcRenderer } = require('electron')
document.getElementById('nav-body-views').style.position = 'absolute'
document.getElementById('nav-body-views').style.width = '100%'
document.getElementById('nav-body-views').style.height = '100%'
const navDefaultURL = url.format({
pathname: 'vclass.us/user/login',
protocol: 'https',
slashes: true
})
const enav = new (require('electron-navigation'))({
newTabParams: [navDefaultURL]
})
enav.newTab(navDefaultURL, {
id: "test",
title: 'vClass',
icon: 'default',
close: true,
readonlyUrl: true,
contextMenu: true
})
enav.openDevTools("test")
});
This is electron.js
const { app, BrowserWindow } = require('electron');
const url = require('url');
const path = require('path');
let win;
function createWindow() {
win = new BrowserWindow({
title: 'vClass',
width: 960,
height: 540,
webPreferences: { nodeIntegration: true, webviewTag: true },
show: false,
center: true,
minWidth: 640,
minHeight: 360,
titleBarStyle: 'hidden',
icon: path.join(__dirname, 'assets/icons/png/64x64.png')
});
win.setMenuBarVisibility(false)
win.once('ready-to-show', () => {
win.show()
})
win.on('closed', () => {
win = null
})
win.loadURL(`file://${__dirname}../../assets/index.html`)
}
app.on('ready', createWindow);
app.on('activate', () => {
if (win === null) {
createWindow()
}
})
let link;
app.on('open-url', function (event, data) {
event.preventDefault();
link = data;
});
app.setAsDefaultProtocolClient('vClass');
module.exports.getLink = () => link;
`
I expect the results that the inputs should be clickable like usual on a browser
Note : Everything works fine when I directly loadURL from electron but it doesn't work in webview