Me encontré con este extraño problema en el que el menú desplegable salta a la parte superior izquierda si se desplaza con overflow: scroll o si es más grande que el cuerpo.

Estoy tratando de cambiar "dinámicamente" un botón desplegable a una entrada al presionar una tecla, y hacer que comparta el mismo cuadro desplegable. El contenido del menú desplegable cambia a medida que escribe.

Creo que es mejor ilustrar el problema mostrando un ejemplo directo (porque es un poco grande): https://jsfiddle.net/eno4v9kL/

El problema ocurre si se desplaza hacia abajo y luego comienza a escribir algo. Luego saltará a la parte superior izquierda.

He intentado controlar el comportamiento del menú desplegable, pero no entiendo cómo debe manejarse;

 dropdown = new bootstrap.Dropdown(elm);

No estoy muy seguro de cómo manejar esto correctamente en JavaScript, porque bootstrap inicializa el menú desplegable automáticamente. ¿Cómo se controla este comportamiento automático?

Creo que una posible solución sería tener 2 menús desplegables, uno para cada elemento en lugar de compartir el mismo menú desplegable, pero me gustaría usar solo este menú desplegable si es posible