Flexdatalist on mobile doesn't scroll with the controlling input field, it separates

[ryanpsloan]

I think this is an awesome tool. Thank you for developing it. I found a bug that I am not able to fix myself. When on a mobile device, the flexdatalist will appear under the controlling field when a value is entered. However if I scroll the page up or down to see more of the list, the flexdatalist will separate from the controlling field and hover in the middle of the page.

The flexdatalist is installed on the language field and will appear when values are entered:

But when rendered on a mobile device the list separates from the field when scrolling the page up or down:

Any ideas how to fix the issue?

Here's how I am implementing flexdatalist:

$('#language-select').flexdatalist({ minLength: 1 }) .on('change:flexdatalist', this.showDependentPicklistValues) .on('select:flexdatalist',function(event){ document.getElementById('quantity').focus(); });

[ryanpsloan]

I fixed this by adding the following code to jquery.flexdatalist.js line 191-193.

document.addEventListener('scroll', function (event) { _this.position(); }, true);