Ensure tabstops are properly scrolled into view

Author: jonpyt

package/src/extensions/autocomplete/tooltip.ts

@@ -172,20 +172,20 @@ const autoComplete =
 			insertText(editor, insert, start, end, tabStops[0], tabStops[1])
 
 			if (l > 2) {
+				if (!stops) addOverlay(editor, tabStopsContainer)
 				stops = tabStops
 				activeStop = 0
 				prevLength = editor.value.length
 				updateStops()
 				currentSelection = getSelection()
-				if (!tabStopsContainer.parentNode) addOverlay(editor, tabStopsContainer)
 			}
 			cursor!.scrollIntoView()
 		}
 
 		const moveActiveStop = (offset: number) => {
 			activeStop += offset
 			setSelection(editor, stops![activeStop], stops![activeStop + 1])
-			cursor!.scrollIntoView()
+			tabStopsContainer.children[activeStop / 2].scrollIntoView({ block: "nearest" })
 		}
 
 		const clearStops = () => {

react-package/src/extensions/autocomplete/tooltip.ts

@@ -180,20 +180,20 @@ const useAutoComplete = (editor: PrismEditor, config: AutoCompleteConfig) => {
 			insertText(editor, insert, start, end, tabStops[0], tabStops[1])
 
 			if (l > 2) {
+				if (!stops) addOverlay(editor, tabStopsContainer)
 				stops = tabStops
 				activeStop = 0
 				prevLength = editor.value.length
 				updateStops()
 				currentSelection = getSelection()
-				if (!tabStopsContainer.parentNode) addOverlay(editor, tabStopsContainer)
 			}
 			cursor!.scrollIntoView()
 		}
 
 		const moveActiveStop = (offset: number) => {
 			activeStop += offset
 			setSelection(editor, stops![activeStop], stops![activeStop + 1])
-			cursor!.scrollIntoView()
+			tabStopsContainer.children[activeStop / 2].scrollIntoView({ block: "nearest" })
 		}
 
 		const clearStops = () => {

solid-package/src/extensions/autocomplete/tooltip.ts

@@ -190,7 +190,7 @@ const autoComplete =
 		const moveActiveStop = (offset: number) => {
 			activeStop += offset
 			setSelection(editor, stops![activeStop], stops![activeStop + 1])
-			cursor!.scrollIntoView()
+			tabStopsContainer.children[activeStop / 2].scrollIntoView({ block: "nearest" })
 		}
 
 		const clearStops = () => {