I have encountered this strange issue where the dropdown will jump to the top left if scrolling with overflow: scroll or if it's bigger than the body.

I'm trying to "dynamically" change a dropdown button to an input on keypress, and have it share the same dropdown box. The content of the dropdown changes as you type.

I think it's better to illustrate the issue by showing a direct example, (because it's a bit big): https://jsfiddle.net/eno4v9kL/

The issue occurs if you scroll down, and then start typing something. It will then jump to the top left.

I have kind of tried to control the behavior of the dropdown but I don't understand how it should be handled;

dropdown = new bootstrap.Dropdown(elm);

I'm not quite sure how to handle this properly in JavaScript, because bootstrap initializes the dropdown automatically. How does one control this automatic behavior?

I think a possible solution would be to have 2 dropdowns, one for each element instead of sharing the same dropdown, but I would like to only use this one dropdown if possible