<p dir="auto">I am trying to load my web application to electron. But many of my application functions are not working in electron. Major problem is dropdown lists are not showing up. I tried loading with window.loadurl and also using webview in index.html.</p>
<ul dir="auto">
<li>Electron version: 1.7.9</li>
<li>Operating system: Windows 10</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">I like to get my web application with full functionalities working in electron</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">Many jquery functions not working. Dropdowns not showing up...</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto">My current html is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;jQuery injection into webview preload&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style=&quot;overflow:hidden;&quot;&gt;
    &lt;webview id=&quot;webview&quot; preload=&quot;./preload.js&quot; src=&quot;http://www.mcgeoautomation.com&quot; style=&quot;position:absolute;width:100%;height:100%;&quot;&gt;&lt;/webview&gt;
    &lt;script&gt;
      // need to have a script tag make webview work even if you don't plan to use it...
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;"><pre lang="&lt;!DOCTYPE" class="notranslate"><code class="notranslate">&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;jQuery injection into webview preload&lt;/title&gt;
  &lt;/head&gt;
  &lt;body style="overflow:hidden;"&gt;
    &lt;webview id="webview" preload="./preload.js" src="http://www.mcgeoautomation.com" style="position:absolute;width:100%;height:100%;"&gt;&lt;/webview&gt;
    &lt;script&gt;
      // need to have a script tag make webview work even if you don't plan to use it...
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">Preload.js is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="    var script = document.createElement(&quot;script&quot;);
    script.src = &quot;./jquery.min.js&quot;;
    document.body.appendChild(script);
};"><pre lang="window.onload" class="notranslate"><code class="notranslate">    var script = document.createElement("script");
    script.src = "./jquery.min.js";
    document.body.appendChild(script);
};
</code></pre></div>
<p dir="auto">index.js is:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const app = electron.app;
var path=require('path');
const BrowserWindow = electron.BrowserWindow;
var mainWindow;

app.on('ready',function(){
	mainWindow = new BrowserWindow({
		width: 1024, 
		height: 768,
		backgroundColor: '#2e2c29',
		show:false,
	});
	
	mainWindow.loadURL(`file://${__dirname}/webView.html`);
	mainWindow.maximize(true);
	mainWindow.once('ready-to-show',()=&gt;{
		mainWindow.show()
	})

	mainWindow.on('close', (e)=&gt;{
			
		app.quit();
	});
});"><pre lang="const" class="notranslate"><code class="notranslate">const app = electron.app;
var path=require('path');
const BrowserWindow = electron.BrowserWindow;
var mainWindow;

app.on('ready',function(){
	mainWindow = new BrowserWindow({
		width: 1024, 
		height: 768,
		backgroundColor: '#2e2c29',
		show:false,
	});
	
	mainWindow.loadURL(`file://${__dirname}/webView.html`);
	mainWindow.maximize(true);
	mainWindow.once('ready-to-show',()=&gt;{
		mainWindow.show()
	})

	mainWindow.on('close', (e)=&gt;{
			
		app.quit();
	});
});
</code></pre></div>
<p dir="auto">Package json:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  &quot;name&quot;: &quot;crushmate&quot;,
  &quot;version&quot;: &quot;1.0.0&quot;,
  &quot;description&quot;: &quot;&quot;,
  &quot;main&quot;: &quot;index.js&quot;,
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;electron .&quot;
  },
  &quot;author&quot;: &quot;&quot;,
  &quot;license&quot;: &quot;ISC&quot;,
  &quot;dependencies&quot;: {
    &quot;electron&quot;: &quot;^1.7.9&quot;,
    &quot;jquery&quot;: &quot;^3.2.1&quot;
  },
  &quot;devDependencies&quot;: {
    &quot;electron-prebuilt&quot;: &quot;^1.4.13&quot;
  }
}"><pre lang="{" class="notranslate"><code class="notranslate">  "name": "crushmate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "electron": "^1.7.9",
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "electron-prebuilt": "^1.4.13"
  }
}
</code></pre></div>
<p dir="auto">Please help....<br>
Regards</p>
<p dir="auto">Electron version: 1.7.3 beta<br>
Operating system: Windows 7 x86_64 Professional</p>
<p dir="auto">Clicking the pyramid icon on an input control associated with a data list and picking a value from the list, then evaluating <code class="notranslate">value</code> property of the input control, the value is expected to match the text chosen from the data list, which the input control is now showing.</p>
<p dir="auto">Instead, the text returned by <code class="notranslate">value</code> property is an empty string, or at least the string that was manually typed into the input control prior.</p>
<p dir="auto">Only manual editing of value of the input control, as you would with an ordinary text input without a n associated datalist, causes the <code class="notranslate">value</code> property to yield the same text that the input control is showing.</p>
<p dir="auto">Using following markup to reproduce by loading up default Electron distribution and typing <code class="notranslate">document.location = ...; /* path to file containing below text */</code> in Developer Tools console:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;body&gt;
		&lt;input list=&quot;foobar&quot;&gt;
		&lt;datalist id=&quot;foobar&quot;&gt;
			&lt;option value=&quot;apple&quot;&gt;
			&lt;option value=&quot;orange&quot;&gt;
			&lt;option value=&quot;banana&quot;&gt;
		&lt;/datalist&gt;
	&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;body&gt;
		&lt;input list="foobar"&gt;
		&lt;datalist id="foobar"&gt;
			&lt;option value="apple"&gt;
			&lt;option value="orange"&gt;
			&lt;option value="banana"&gt;
		&lt;/datalist&gt;
	&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>