` layer over the dropdown to intercept user's clicks. This workaround is applied as soon as the web page fires the `DOMContentLoaded` JavaScript event. The default value is `false`.
##### `InAppWebView` iOS-specific options
diff --git a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java b/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java
index dcf390b9..f62047fa 100644
--- a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java
+++ b/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebView.java
@@ -515,455 +515,445 @@ final public class InAppWebView extends InputAwareWebView {
"})(window.fetch);";
// Android API 19+
+ // ResizeSensor: https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
static final String dropDownWorkaroundJS = "(function() {" +
- " var uuid = 0;" +
- " function prepare() {" +
- " if (typeof window === \"undefined\") {" +
- " return null;" +
- " }" +
- " var globalWindow =" +
- " typeof window != \"undefined\" && window.Math == Math" +
- " ? window" +
- " : typeof self != \"undefined\" && self.Math == Math" +
- " ? self" +
- " : Function(\"return this\")();" +
- " var requestAnimationFrame =" +
- " globalWindow.requestAnimationFrame ||" +
- " globalWindow.mozRequestAnimationFrame ||" +
- " globalWindow.webkitRequestAnimationFrame ||" +
- " function(fn) {" +
- " return globalWindow.setTimeout(fn, 20);" +
- " };" +
- " function forEachElement(elements, callback) {" +
- " var elementsType = Object.prototype.toString.call(elements);" +
- " var isCollectionTyped =" +
- " \"[object Array]\" === elementsType ||" +
- " \"[object NodeList]\" === elementsType ||" +
- " \"[object HTMLCollection]\" === elementsType ||" +
- " \"[object Object]\" === elementsType ||" +
- " (\"undefined\" !== typeof jQuery && elements instanceof jQuery) ||" +
- " (\"undefined\" !== typeof Elements && elements instanceof Elements);" +
- " var i = 0," +
- " j = elements.length;" +
- " if (isCollectionTyped) {" +
- " for (; i < j; i++) {" +
- " callback(elements[i]);" +
+ " function dropDownWorkaround(window, document) {" +
+ " var uuid = 0;" +
+ " function prepare() {" +
+ " if (typeof window === 'undefined') {" +
+ " return null;" +
+ " }" +
+ " var globalWindow =" +
+ " typeof window != 'undefined' && window.Math == Math" +
+ " ? window" +
+ " : typeof self != 'undefined' && self.Math == Math" +
+ " ? self" +
+ " : Function('return this')();" +
+ " var requestAnimationFrame =" +
+ " globalWindow.requestAnimationFrame ||" +
+ " globalWindow.mozRequestAnimationFrame ||" +
+ " globalWindow.webkitRequestAnimationFrame ||" +
+ " function(fn) {" +
+ " return globalWindow.setTimeout(fn, 20);" +
+ " };" +
+ " function forEachElement(elements, callback) {" +
+ " var elementsType = Object.prototype.toString.call(elements);" +
+ " var isCollectionTyped =" +
+ " '[object Array]' === elementsType ||" +
+ " '[object NodeList]' === elementsType ||" +
+ " '[object HTMLCollection]' === elementsType ||" +
+ " '[object Object]' === elementsType ||" +
+ " ('undefined' !== typeof jQuery && elements instanceof jQuery) ||" +
+ " ('undefined' !== typeof Elements && elements instanceof Elements);" +
+ " var i = 0," +
+ " j = elements.length;" +
+ " if (isCollectionTyped) {" +
+ " for (; i < j; i++) {" +
+ " callback(elements[i]);" +
+ " }" +
+ " } else {" +
+ " callback(elements);" +
" }" +
- " } else {" +
- " callback(elements);" +
" }" +
- " }" +
- " function getElementSize(element) {" +
- " if (!element.getBoundingClientRect) {" +
+ " function getElementSize(element) {" +
+ " if (!element.getBoundingClientRect) {" +
+ " return {" +
+ " width: element.offsetWidth," +
+ " height: element.offsetHeight" +
+ " };" +
+ " }" +
+ " var rect = element.getBoundingClientRect();" +
" return {" +
- " width: element.offsetWidth," +
- " height: element.offsetHeight" +
+ " width: Math.round(rect.width)," +
+ " height: Math.round(rect.height)" +
" };" +
" }" +
- "" +
- " var rect = element.getBoundingClientRect();" +
- " return {" +
- " width: Math.round(rect.width)," +
- " height: Math.round(rect.height)" +
- " };" +
- " }" +
- " function setStyle(element, style) {" +
- " Object.keys(style).forEach(function(key) {" +
- " element.style[key] = style[key];" +
- " });" +
- " }" +
- " var ResizeSensor = function(element, callback) {" +
- " var lastAnimationFrame = 0;" +
- " function EventQueue() {" +
- " var q = [];" +
- " this.add = function(ev) {" +
- " q.push(ev);" +
- " };" +
- "" +
- " var i, j;" +
- " this.call = function(sizeInfo) {" +
- " for (i = 0, j = q.length; i < j; i++) {" +
- " q[i].call(this, sizeInfo);" +
- " }" +
- " };" +
- "" +
- " this.remove = function(ev) {" +
- " var newQueue = [];" +
- " for (i = 0, j = q.length; i < j; i++) {" +
- " if (q[i] !== ev) newQueue.push(q[i]);" +
- " }" +
- " q = newQueue;" +
- " };" +
- "" +
- " this.length = function() {" +
- " return q.length;" +
- " };" +
+ " function setStyle(element, style) {" +
+ " Object.keys(style).forEach(function(key) {" +
+ " element.style[key] = style[key];" +
+ " });" +
" }" +
- " function attachResizeEvent(element, resized) {" +
- " if (!element) return;" +
- " if (element.resizedAttached) {" +
+ " var ResizeSensor = function(element, callback) {" +
+ " var lastAnimationFrame = 0;" +
+ " function EventQueue() {" +
+ " var q = [];" +
+ " this.add = function(ev) {" +
+ " q.push(ev);" +
+ " };" +
+ " var i, j;" +
+ " this.call = function(sizeInfo) {" +
+ " for (i = 0, j = q.length; i < j; i++) {" +
+ " q[i].call(this, sizeInfo);" +
+ " }" +
+ " };" +
+ " this.remove = function(ev) {" +
+ " var newQueue = [];" +
+ " for (i = 0, j = q.length; i < j; i++) {" +
+ " if (q[i] !== ev) newQueue.push(q[i]);" +
+ " }" +
+ " q = newQueue;" +
+ " };" +
+ " this.length = function() {" +
+ " return q.length;" +
+ " };" +
+ " }" +
+ " function attachResizeEvent(element, resized) {" +
+ " if (!element) return;" +
+ " if (element.resizedAttached) {" +
+ " element.resizedAttached.add(resized);" +
+ " return;" +
+ " }" +
+ " element.resizedAttached = new EventQueue();" +
" element.resizedAttached.add(resized);" +
+ " element.resizeSensor = document.createElement('div');" +
+ " element.resizeSensor.dir = 'ltr';" +
+ " element.resizeSensor.className = 'resize-sensor';" +
+ " var style = {" +
+ " pointerEvents: 'none'," +
+ " position: 'absolute'," +
+ " left: '0px'," +
+ " top: '0px'," +
+ " right: '0px'," +
+ " bottom: '0px'," +
+ " overflow: 'hidden'," +
+ " zIndex: '-1'," +
+ " visibility: 'hidden'," +
+ " maxWidth: '100%'" +
+ " };" +
+ " var styleChild = {" +
+ " position: 'absolute'," +
+ " left: '0px'," +
+ " top: '0px'," +
+ " transition: '0s'" +
+ " };" +
+ " setStyle(element.resizeSensor, style);" +
+ " var expand = document.createElement('div');" +
+ " expand.className = 'resize-sensor-expand';" +
+ " setStyle(expand, style);" +
+ " var expandChild = document.createElement('div');" +
+ " setStyle(expandChild, styleChild);" +
+ " expand.appendChild(expandChild);" +
+ " var shrink = document.createElement('div');" +
+ " shrink.className = 'resize-sensor-shrink';" +
+ " setStyle(shrink, style);" +
+ " var shrinkChild = document.createElement('div');" +
+ " setStyle(shrinkChild, styleChild);" +
+ " setStyle(shrinkChild, { width: '200%', height: '200%' });" +
+ " shrink.appendChild(shrinkChild);" +
+ " element.resizeSensor.appendChild(expand);" +
+ " element.resizeSensor.appendChild(shrink);" +
+ " element.appendChild(element.resizeSensor);" +
+ " var computedStyle = window.getComputedStyle(element);" +
+ " var position = computedStyle" +
+ " ? computedStyle.getPropertyValue('position')" +
+ " : null;" +
+ " if (" +
+ " 'absolute' !== position &&" +
+ " 'relative' !== position &&" +
+ " 'fixed' !== position &&" +
+ " 'sticky' !== position" +
+ " ) {" +
+ " element.style.position = 'relative';" +
+ " }" +
+ " var dirty, rafId;" +
+ " var size = getElementSize(element);" +
+ " var lastWidth = 0;" +
+ " var lastHeight = 0;" +
+ " var initialHiddenCheck = true;" +
+ " lastAnimationFrame = 0;" +
+ " var resetExpandShrink = function() {" +
+ " var width = element.offsetWidth;" +
+ " var height = element.offsetHeight;" +
+ " expandChild.style.width = width + 10 + 'px';" +
+ " expandChild.style.height = height + 10 + 'px';" +
+ " expand.scrollLeft = width + 10;" +
+ " expand.scrollTop = height + 10;" +
+ " shrink.scrollLeft = width + 10;" +
+ " shrink.scrollTop = height + 10;" +
+ " };" +
+ " var reset = function() {" +
+ " if (initialHiddenCheck) {" +
+ " var invisible =" +
+ " element.offsetWidth === 0 && element.offsetHeight === 0;" +
+ " if (invisible) {" +
+ " if (!lastAnimationFrame) {" +
+ " lastAnimationFrame = requestAnimationFrame(function() {" +
+ " lastAnimationFrame = 0;" +
+ " reset();" +
+ " });" +
+ " }" +
+ " return;" +
+ " } else {" +
+ " initialHiddenCheck = false;" +
+ " }" +
+ " }" +
+ " resetExpandShrink();" +
+ " };" +
+ " element.resizeSensor.resetSensor = reset;" +
+ " var onResized = function() {" +
+ " rafId = 0;" +
+ " if (!dirty) return;" +
+ " lastWidth = size.width;" +
+ " lastHeight = size.height;" +
+ " if (element.resizedAttached) {" +
+ " element.resizedAttached.call(size);" +
+ " }" +
+ " };" +
+ " var onScroll = function() {" +
+ " size = getElementSize(element);" +
+ " dirty = size.width !== lastWidth || size.height !== lastHeight;" +
+ " if (dirty && !rafId) {" +
+ " rafId = requestAnimationFrame(onResized);" +
+ " }" +
+ " reset();" +
+ " };" +
+ " var addEvent = function(el, name, cb) {" +
+ " if (el.attachEvent) {" +
+ " el.attachEvent('on' + name, cb);" +
+ " } else {" +
+ " el.addEventListener(name, cb);" +
+ " }" +
+ " };" +
+ " addEvent(expand, 'scroll', onScroll);" +
+ " addEvent(shrink, 'scroll', onScroll);" +
+ " lastAnimationFrame = requestAnimationFrame(reset);" +
+ " }" +
+ " forEachElement(element, function(elem) {" +
+ " attachResizeEvent(elem, callback);" +
+ " });" +
+ " this.detach = function(ev) {" +
+ " if (!lastAnimationFrame) {" +
+ " window.cancelAnimationFrame(lastAnimationFrame);" +
+ " lastAnimationFrame = 0;" +
+ " }" +
+ " ResizeSensor.detach(element, ev);" +
+ " };" +
+ " this.reset = function() {" +
+ " element.resizeSensor.resetSensor();" +
+ " };" +
+ " };" +
+ " ResizeSensor.reset = function(element) {" +
+ " forEachElement(element, function(elem) {" +
+ " elem.resizeSensor.resetSensor();" +
+ " });" +
+ " };" +
+ " ResizeSensor.detach = function(element, ev) {" +
+ " forEachElement(element, function(elem) {" +
+ " if (!elem) return;" +
+ " if (elem.resizedAttached && typeof ev === 'function') {" +
+ " elem.resizedAttached.remove(ev);" +
+ " if (elem.resizedAttached.length()) return;" +
+ " }" +
+ " if (elem.resizeSensor) {" +
+ " if (elem.contains(elem.resizeSensor)) {" +
+ " elem.removeChild(elem.resizeSensor);" +
+ " }" +
+ " delete elem.resizeSensor;" +
+ " delete elem.resizedAttached;" +
+ " }" +
+ " });" +
+ " };" +
+ " if (typeof MutationObserver !== 'undefined') {" +
+ " var observer = new MutationObserver(function(mutations) {" +
+ " for (var i in mutations) {" +
+ " if (mutations.hasOwnProperty(i)) {" +
+ " var items = mutations[i].addedNodes;" +
+ " for (var j = 0; j < items.length; j++) {" +
+ " if (items[j].resizeSensor) {" +
+ " ResizeSensor.reset(items[j]);" +
+ " }" +
+ " }" +
+ " }" +
+ " }" +
+ " });" +
+ " document.addEventListener('DOMContentLoaded', function(event) {" +
+ " observer.observe(document.body, {" +
+ " childList: true," +
+ " subtree: true" +
+ " });" +
+ " });" +
+ " }" +
+ " return ResizeSensor;" +
+ " }" +
+ " var ResizeSensor = prepare();" +
+ " function pseudoStyle(htmlElement, pseudoElement, styles) {" +
+ " var _sheetId = 'pseudoStyles';" +
+ " var _head = document.head || document.getElementsByTagName('head')[0];" +
+ " var _sheet =" +
+ " document.getElementById(_sheetId) || document.createElement('style');" +
+ " _sheet.id = _sheetId;" +
+ " var styleClass = htmlElement.className.split(' ').join('.');" +
+ " if (styleClass.charAt(0) != '.') {" +
+ " styleClass = '.' + styleClass;" +
+ " }" +
+ " _sheet.innerHTML += '\\n' + styleClass + ':' + pseudoElement + '{';" +
+ " for (var key in styles) {" +
+ " _sheet.innerHTML += key + ':' + styles[key] + ';\\n';" +
+ " }" +
+ " _sheet.innerHTML += '}';" +
+ " _head.appendChild(_sheet);" +
+ " }" +
+ " function getIndexSelectValues(select) {" +
+ " var result = [];" +
+ " var options = select && select.options;" +
+ " for (var i = 0, iLen = options.length; i < iLen; i++) {" +
+ " var opt = options[i];" +
+ " if (opt.selected) {" +
+ " result.push(i);" +
+ " }" +
+ " }" +
+ " return result;" +
+ " }" +
+ " function setMultipleValues(select, values) {" +
+ " var options = select && select.options;" +
+ " for (var i = 0, iLen = options.length; i < iLen; i++) {" +
+ " var opt = options[i];" +
+ " opt.selected = values.indexOf(opt.value) >= 0;" +
+ " }" +
+ " }" +
+ " function addSpanWrapper(selectElement) {" +
+ " var spanElement = document.createElement('span');" +
+ " spanElement.flutterInAppWebViewSelect = selectElement;" +
+ " new ResizeSensor(spanElement, function() {" +
+ " var style =" +
+ " selectElement.currentStyle || window.getComputedStyle(selectElement);" +
+ " var xMargin =" +
+ " parseFloat(style.marginLeft) + parseFloat(style.marginRight);" +
+ " var yMargin =" +
+ " parseFloat(style.marginTop) + parseFloat(style.marginBottom);" +
+ " selectElement.style.width =" +
+ " spanElement.getBoundingClientRect().width - xMargin + 'px';" +
+ " selectElement.style.height =" +
+ " spanElement.getBoundingClientRect().height - yMargin + 'px';" +
+ " });" +
+ " spanElement.className = 'flutterInAppWebViewSelect-' + uuid;" +
+ " spanElement.style.padding = '0px';" +
+ " spanElement.style.margin = '0px';" +
+ " spanElement.style.border = '0px';" +
+ " spanElement.style.display = 'inline-block';" +
+ " spanElement.style.backgroundColor = 'transparent';" +
+ " spanElement.style.position = 'relative';" +
+ " pseudoStyle(spanElement, 'before', {" +
+ " content: '\\' \\''," +
+ " width: '100%'," +
+ " height: '100%'," +
+ " position: 'absolute'," +
+ " top: '0'," +
+ " left: '0'," +
+ " 'z-index': 99999999" +
+ " });" +
+ " selectElement.flutterInAppWebViewSpanWrapper = spanElement;" +
+ " var clickEventListener = function(event) {" +
+ " var self = this;" +
+ " event.preventDefault();" +
+ " var isDisabled = !!this.flutterInAppWebViewSelect.disabled;" +
+ " if (isDisabled) {" +
" return;" +
" }" +
- "" +
- " element.resizedAttached = new EventQueue();" +
- " element.resizedAttached.add(resized);" +
- "" +
- " element.resizeSensor = document.createElement(\"div\");" +
- " element.resizeSensor.dir = \"ltr\";" +
- " element.resizeSensor.className = \"resize-sensor\";" +
- "" +
- " var style = {" +
- " pointerEvents: \"none\"," +
- " position: \"absolute\"," +
- " left: \"0px\"," +
- " top: \"0px\"," +
- " right: \"0px\"," +
- " bottom: \"0px\"," +
- " overflow: \"hidden\"," +
- " zIndex: \"-1\"," +
- " visibility: \"hidden\"," +
- " maxWidth: \"100%\"" +
- " };" +
- " var styleChild = {" +
- " position: \"absolute\"," +
- " left: \"0px\"," +
- " top: \"0px\"," +
- " transition: \"0s\"" +
- " };" +
- "" +
- " setStyle(element.resizeSensor, style);" +
- "" +
- " var expand = document.createElement(\"div\");" +
- " expand.className = \"resize-sensor-expand\";" +
- " setStyle(expand, style);" +
- "" +
- " var expandChild = document.createElement(\"div\");" +
- " setStyle(expandChild, styleChild);" +
- " expand.appendChild(expandChild);" +
- "" +
- " var shrink = document.createElement(\"div\");" +
- " shrink.className = \"resize-sensor-shrink\";" +
- " setStyle(shrink, style);" +
- "" +
- " var shrinkChild = document.createElement(\"div\");" +
- " setStyle(shrinkChild, styleChild);" +
- " setStyle(shrinkChild, { width: \"200%\", height: \"200%\" });" +
- " shrink.appendChild(shrinkChild);" +
- "" +
- " element.resizeSensor.appendChild(expand);" +
- " element.resizeSensor.appendChild(shrink);" +
- " element.appendChild(element.resizeSensor);" +
- "" +
- " var computedStyle = window.getComputedStyle(element);" +
- " var position = computedStyle" +
- " ? computedStyle.getPropertyValue(\"position\")" +
- " : null;" +
- " if (" +
- " \"absolute\" !== position &&" +
- " \"relative\" !== position &&" +
- " \"fixed\" !== position &&" +
- " \"sticky\" !== position" +
- " ) {" +
- " element.style.position = \"relative\";" +
+ " this.flutterInAppWebViewSelect.focus();" +
+ " var options = [];" +
+ " var optionElements = this.flutterInAppWebViewSelect.querySelectorAll(" +
+ " 'option'" +
+ " );" +
+ " for (var i = 0; i < optionElements.length; i++) {" +
+ " var optionElement = optionElements[i];" +
+ " options.push({" +
+ " key: optionElement.textContent," +
+ " value: optionElement.value" +
+ " });" +
" }" +
- "" +
- " var dirty, rafId;" +
- " var size = getElementSize(element);" +
- " var lastWidth = 0;" +
- " var lastHeight = 0;" +
- " var initialHiddenCheck = true;" +
- " lastAnimationFrame = 0;" +
- "" +
- " var resetExpandShrink = function() {" +
- " var width = element.offsetWidth;" +
- " var height = element.offsetHeight;" +
- "" +
- " expandChild.style.width = width + 10 + \"px\";" +
- " expandChild.style.height = height + 10 + \"px\";" +
- "" +
- " expand.scrollLeft = width + 10;" +
- " expand.scrollTop = height + 10;" +
- "" +
- " shrink.scrollLeft = width + 10;" +
- " shrink.scrollTop = height + 10;" +
- " };" +
- "" +
- " var reset = function() {" +
- " if (initialHiddenCheck) {" +
- " var invisible =" +
- " element.offsetWidth === 0 && element.offsetHeight === 0;" +
- " if (invisible) {" +
- " if (!lastAnimationFrame) {" +
- " lastAnimationFrame = requestAnimationFrame(function() {" +
- " lastAnimationFrame = 0;" +
- "" +
- " reset();" +
- " });" +
+ " var isMultiple = !!this.flutterInAppWebViewSelect.multiple;" +
+ " window.flutter_inappwebview" +
+ " .callHandler(" +
+ " 'flutterInAppWebViewDropDownWorkaround'," +
+ " getIndexSelectValues(this.flutterInAppWebViewSelect)," +
+ " isMultiple," +
+ " options" +
+ " )" +
+ " .then(function(result) {" +
+ " if (result != null && result.values != null) {" +
+ " if (!isMultiple) {" +
+ " if (result.values.length > 0) {" +
+ " self.flutterInAppWebViewSelect.value = result.values[0];" +
+ " }" +
+ " } else {" +
+ " setMultipleValues(" +
+ " self.flutterInAppWebViewSelect," +
+ " result.values" +
+ " );" +
" }" +
- "" +
- " return;" +
- " } else {" +
- " initialHiddenCheck = false;" +
" }" +
- " }" +
- "" +
- " resetExpandShrink();" +
- " };" +
- " element.resizeSensor.resetSensor = reset;" +
- "" +
- " var onResized = function() {" +
- " rafId = 0;" +
- "" +
- " if (!dirty) return;" +
- "" +
- " lastWidth = size.width;" +
- " lastHeight = size.height;" +
- "" +
- " if (element.resizedAttached) {" +
- " element.resizedAttached.call(size);" +
- " }" +
- " };" +
- "" +
- " var onScroll = function() {" +
- " size = getElementSize(element);" +
- " dirty = size.width !== lastWidth || size.height !== lastHeight;" +
- "" +
- " if (dirty && !rafId) {" +
- " rafId = requestAnimationFrame(onResized);" +
- " }" +
- "" +
- " reset();" +
- " };" +
- "" +
- " var addEvent = function(el, name, cb) {" +
- " if (el.attachEvent) {" +
- " el.attachEvent(\"on\" + name, cb);" +
- " } else {" +
- " el.addEventListener(name, cb);" +
- " }" +
- " };" +
- "" +
- " addEvent(expand, \"scroll\", onScroll);" +
- " addEvent(shrink, \"scroll\", onScroll);" +
- "" +
- " lastAnimationFrame = requestAnimationFrame(reset);" +
- " }" +
- "" +
- " forEachElement(element, function(elem) {" +
- " attachResizeEvent(elem, callback);" +
- " });" +
- "" +
- " this.detach = function(ev) {" +
- " if (!lastAnimationFrame) {" +
- " window.cancelAnimationFrame(lastAnimationFrame);" +
- " lastAnimationFrame = 0;" +
- " }" +
- " ResizeSensor.detach(element, ev);" +
+ " var evt = document.createEvent('HTMLEvents');" +
+ " evt.initEvent('change', false, true);" +
+ " self.flutterInAppWebViewSelect.dispatchEvent(evt);" +
+ " self.flutterInAppWebViewSelect.blur();" +
+ " });" +
" };" +
- "" +
- " this.reset = function() {" +
- " element.resizeSensor.resetSensor();" +
- " };" +
- " };" +
- "" +
- " ResizeSensor.reset = function(element) {" +
- " forEachElement(element, function(elem) {" +
- " elem.resizeSensor.resetSensor();" +
+ " spanElement.addEventListener('click', clickEventListener);" +
+ " divWithEventListeners.push({" +
+ " spanElement: spanElement," +
+ " clickEvent: clickEventListener" +
" });" +
- " };" +
- "" +
- " ResizeSensor.detach = function(element, ev) {" +
- " forEachElement(element, function(elem) {" +
- " if (!elem) return;" +
- " if (elem.resizedAttached && typeof ev === \"function\") {" +
- " elem.resizedAttached.remove(ev);" +
- " if (elem.resizedAttached.length()) return;" +
- " }" +
- " if (elem.resizeSensor) {" +
- " if (elem.contains(elem.resizeSensor)) {" +
- " elem.removeChild(elem.resizeSensor);" +
+ " selectElement.parentNode.insertBefore(spanElement, selectElement);" +
+ " spanElement.appendChild(selectElement);" +
+ " uuid++;" +
+ " }" +
+ " function removeSpanWrapper(selectElement) {" +
+ " if (selectElement.flutterInAppWebViewSpanWrapper) {" +
+ " divWithEventListeners.splice(" +
+ " divWithEventListeners.indexOf(" +
+ " selectElement.flutterInAppWebViewSpanWrapper" +
+ " )," +
+ " 1" +
+ " );" +
+ " document.body.removeChild(selectElement.flutterInAppWebViewSpanWrapper);" +
+ " }" +
+ " }" +
+ " var selectElements = document.querySelectorAll('select');" +
+ " var divWithEventListeners = [];" +
+ " for (var selectElement of selectElements) {" +
+ " addSpanWrapper(selectElement);" +
+ " }" +
+ " var mutationObserver = new MutationObserver(function(mutations) {" +
+ " mutations.forEach(function(mutation) {" +
+ " for (var nodeElement of mutation.addedNodes) {" +
+ " if (nodeElement.tagName == 'SELECT') {" +
+ " addSpanWrapper(nodeElement);" +
" }" +
- " delete elem.resizeSensor;" +
- " delete elem.resizedAttached;" +
" }" +
- " });" +
- " };" +
- "" +
- " if (typeof MutationObserver !== \"undefined\") {" +
- " var observer = new MutationObserver(function(mutations) {" +
- " for (var i in mutations) {" +
- " if (mutations.hasOwnProperty(i)) {" +
- " var items = mutations[i].addedNodes;" +
- " for (var j = 0; j < items.length; j++) {" +
- " if (items[j].resizeSensor) {" +
- " ResizeSensor.reset(items[j]);" +
- " }" +
+ " for (var nodeElement of mutation.removedNodes) {" +
+ " if (nodeElement.tagName == 'SELECT') {" +
+ " removeSpanWrapper(nodeElement);" +
+ " if (nodeElement.mutationObserver) {" +
+ " nodeElement.mutationObserver.disconnect();" +
" }" +
" }" +
" }" +
" });" +
- "" +
- " document.addEventListener(\"DOMContentLoaded\", function(event) {" +
- " observer.observe(document.body, {" +
- " childList: true," +
- " subtree: true" +
- " });" +
- " });" +
- " }" +
- "" +
- " return ResizeSensor;" +
- " }" +
- " var ResizeSensor = prepare();" +
- " function pseudoStyle(htmlElement, pseudoElement, styles) {" +
- " var _sheetId = \"pseudoStyles\";" +
- " var _head = document.head || document.getElementsByTagName(\"head\")[0];" +
- " var _sheet =" +
- " document.getElementById(_sheetId) || document.createElement(\"style\");" +
- " _sheet.id = _sheetId;" +
- " var styleClass = htmlElement.className.split(\" \").join(\".\");" +
- " if (styleClass.charAt(0) != \".\") {" +
- " styleClass = \".\" + styleClass;" +
- " }" +
- " _sheet.innerHTML += \"\n\" + styleClass + \":\" + pseudoElement + \"{\";" +
- " for (var key in styles) {" +
- " _sheet.innerHTML += key + \":\" + styles[key] + \";\n\";" +
- " }" +
- " _sheet.innerHTML += \"}\";" +
- " _head.appendChild(_sheet);" +
- " }" +
- " function getIndexSelectValues(select) {" +
- " var result = [];" +
- " var options = select && select.options;" +
- " for (var i = 0, iLen = options.length; i < iLen; i++) {" +
- " var opt = options[i];" +
- " if (opt.selected) {" +
- " result.push(i);" +
- " }" +
- " }" +
- " return result;" +
- " }" +
- " function setMultipleValues(select, values) {" +
- " var options = select && select.options;" +
- " for (var i = 0, iLen = options.length; i < iLen; i++) {" +
- " var opt = options[i];" +
- " opt.selected = values.indexOf(opt.value) >= 0;" +
- " }" +
- " }" +
- " function addSpanWrapper(selectElement) {" +
- " var spanElement = document.createElement(\"span\");" +
- " spanElement.flutterInAppWebViewSelect = selectElement;" +
- " new ResizeSensor(spanElement, function() {" +
- " var style = selectElement.currentStyle || window.getComputedStyle(selectElement);" +
- " var xMargin = parseFloat(style.marginLeft) + parseFloat(style.marginRight);" +
- " var yMargin = parseFloat(style.marginTop) + parseFloat(style.marginBottom);" +
- " selectElement.style.width = (spanElement.getBoundingClientRect().width - xMargin) + \"px\";" +
- " selectElement.style.height = (spanElement.getBoundingClientRect().height - yMargin) + \"px\";" +
" });" +
- " spanElement.className = \"flutterInAppWebViewSelect-\" + uuid;" +
- " spanElement.style.padding = \"0px\";" +
- " spanElement.style.margin = \"0px\";" +
- " spanElement.style.border = \"0px\";" +
- " spanElement.style.display = \"inline-block\";" +
- " spanElement.style.backgroundColor = \"transparent\";" +
- " spanElement.style.position = \"relative\";" +
- " pseudoStyle(spanElement, \"before\", {" +
- " content: \"' '\"," +
- " width: \"100%\"," +
- " height: \"100%\"," +
- " position: \"absolute\"," +
- " top: \"0\"," +
- " left: \"0\"," +
- " \"z-index\": 99999999" +
+ " mutationObserver.observe(document.body, {" +
+ " childList: true," +
+ " subtree: true" +
" });" +
- " selectElement.flutterInAppWebViewSpanWrapper = spanElement;" +
- " var clickEventListener = function(event) {" +
- " var self = this;" +
- " event.preventDefault();" +
- " var isDisabled = !!this.flutterInAppWebViewSelect.disabled;" +
- " if (isDisabled) {" +
- " return;" +
- " }" +
- " this.flutterInAppWebViewSelect.focus();" +
- " var options = [];" +
- " var optionElements = this.flutterInAppWebViewSelect.querySelectorAll(" +
- " \"option\"" +
- " );" +
- " for (var i = 0; i < optionElements.length; i++) {" +
- " var optionElement = optionElements[i];" +
- " options.push({" +
- " key: optionElement.textContent," +
- " value: optionElement.value" +
- " });" +
- " }" +
- " var isMultiple = !!this.flutterInAppWebViewSelect.multiple;" +
- " window." + JavaScriptBridgeInterface.name + ".callHandler(" +
- " \"flutterInAppWebViewDropDownWorkaround\"," +
- " getIndexSelectValues(this.flutterInAppWebViewSelect)," +
- " isMultiple," +
- " options" +
- " )" +
- " .then(function(result) {" +
- " if (result != null && result.values != null) {" +
- " if (!isMultiple) {" +
- " if (result.values.length > 0) {" +
- " self.flutterInAppWebViewSelect.value = result.values[0];" +
- " }" +
- " } else {" +
- " setMultipleValues(self.flutterInAppWebViewSelect, result.values);" +
- " }" +
- " }" +
- " var evt = document.createEvent('HTMLEvents');" +
- " evt.initEvent('change', false, true);" +
- " self.flutterInAppWebViewSelect.dispatchEvent(evt);" +
- " self.flutterInAppWebViewSelect.blur();" +
- " });" +
- " };" +
- " spanElement.addEventListener('click', clickEventListener);" +
- " divWithEventListeners.push({" +
- " spanElement: spanElement," +
- " clickEvent: clickEventListener" +
- " });" +
- " selectElement.parentNode.insertBefore(spanElement, selectElement);" +
- " spanElement.appendChild(selectElement);" +
- " uuid++;" +
" }" +
- " function removeSpanWrapper(selectElement) {" +
- " if (selectElement.flutterInAppWebViewSpanWrapper) {" +
- " divWithEventListeners.splice(" +
- " divWithEventListeners.indexOf(" +
- " selectElement.flutterInAppWebViewSpanWrapper" +
- " )," +
- " 1" +
- " );" +
- " document.body.removeChild(selectElement.flutterInAppWebViewSpanWrapper);" +
- " }" +
- " }" +
- " var selectElements = document.querySelectorAll('select');" +
- " var divWithEventListeners = [];" +
- " for (var selectElement of selectElements) {" +
- " addSpanWrapper(selectElement);" +
- " }" +
- " var mutationObserver = new MutationObserver(function(mutations) {" +
- " mutations.forEach(function(mutation) {" +
- " for (var nodeElement of mutation.addedNodes) {" +
- " if (nodeElement.tagName == 'SELECT') {" +
- " addSpanWrapper(nodeElement);" +
+ " document.addEventListener('DOMContentLoaded', function() {" +
+ " dropDownWorkaround(window, document);" +
+ " var iframes = document.querySelectorAll('iframe');" +
+ " for (var i = 0; i < iframes.length; i++) {" +
+ " var iframe = iframes[i];" +
+ " var frameDocument;" +
+ " try {" +
+ " frameDocument = iframe.contentDocument;" +
+ " if (!frameDocument && iframe.contentWindow) {" +
+ " frameDocument = iframe.contentWindow.document;" +
" }" +
- " }" +
- " for (var nodeElement of mutation.removedNodes) {" +
- " if (nodeElement.tagName == 'SELECT') {" +
- " removeSpanWrapper(nodeElement);" +
- " if (nodeElement.mutationObserver) {" +
- " nodeElement.mutationObserver.disconnect();" +
- " }" +
+ " if (frameDocument != null) {" +
+ " dropDownWorkaround(window, frameDocument);" +
" }" +
+ " } catch (error) {" +
+ " console.error(error);" +
" }" +
- " });" +
- " });" +
- " mutationObserver.observe(document.body, {" +
- " childList: true," +
- " subtree: true" +
+ " }" +
" });" +
"})();";
diff --git a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java b/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
index 84d4f583..ffe9a4ea 100644
--- a/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
+++ b/android/src/main/java/com/pichillilorenzo/flutter_inappwebview/InAppWebView/InAppWebViewClient.java
@@ -180,6 +180,9 @@ public class InAppWebViewClient extends WebViewClient {
if (webView.options.useOnLoadResource) {
js += InAppWebView.resourceObserverJS.replaceAll("[\r\n]+", "");
}
+ if (webView.options.dropDownWorkaroundEnabled && Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
+ js += InAppWebView.dropDownWorkaroundJS.replaceAll("[\r\n]+", "");
+ }
js += InAppWebView.printJS.replaceAll("[\r\n]+", "");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
@@ -226,10 +229,6 @@ public class InAppWebViewClient extends WebViewClient {
String js = InAppWebView.platformReadyJS.replaceAll("[\r\n]+", "");
- if (webView.options.dropDownWorkaroundEnabled) {
- js += InAppWebView.dropDownWorkaroundJS.replaceAll("[\r\n]+", "");
- }
-
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
webView.evaluateJavascript(js, (ValueCallback
) null);
} else {
diff --git a/lib/src/webview_options.dart b/lib/src/webview_options.dart
index 1109221e..5ff96069 100644
--- a/lib/src/webview_options.dart
+++ b/lib/src/webview_options.dart
@@ -410,6 +410,7 @@ class AndroidInAppWebViewOptions
///Enable a temporary workaround for html dropdowns (`