fix: (attempt) new toolbar item scrollIntoView not working on mobile

chrisgurney · May 13, 2024 · 6ade527 · 6ade527
1 parent 133fa24
commit 6ade527
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 11 deletions.
diff --git a/src/Settings/ToolbarSettingsModal.ts b/src/Settings/ToolbarSettingsModal.ts
@@ -1,5 +1,5 @@
-import { App, ButtonComponent, Menu, Modal, Setting, TFile, debounce, normalizePath, setIcon } from 'obsidian';
-import { arraymove, debugLog, emptyMessageFr, getPosition, hasVars, removeComponentVisibility, addComponentVisibility, learnMoreFr, scrollElementIntoView } from 'src/Utils/Utils';
+import { App, ButtonComponent, Menu, Modal, Platform, Setting, TFile, debounce, normalizePath, setIcon } from 'obsidian';
+import { arraymove, debugLog, emptyMessageFr, getPosition, hasVars, removeComponentVisibility, addComponentVisibility, learnMoreFr } from 'src/Utils/Utils';
 import NoteToolbarPlugin from 'src/main';
 import { DEFAULT_STYLE_OPTIONS, LinkType, MOBILE_STYLE_OPTIONS, POSITION_OPTIONS, PlatformType, PositionType, ToolbarItemSettings, ToolbarSettings } from './NoteToolbarSettings';
 import { NoteToolbarSettingTab } from './NoteToolbarSettingTab';
@@ -73,8 +73,12 @@ export default class ToolbarSettingsModal extends Modal {
 			let inputToFocus = this.contentEl.querySelector('#note-toolbar-setting-item-field-' + (this.toolbar.items.length - 1) + ' input[type="text"]') as HTMLInputElement;
 			let inputContainer = inputToFocus.closest('.note-toolbar-setting-item') as HTMLElement;
 			if (inputToFocus?.value.length === 0) {
-				scrollElementIntoView(this.modalEl, inputContainer);
 				inputToFocus.focus();
+				if (Platform.isMobile) {
+					setTimeout(() => { 
+						inputContainer.scrollIntoView(true);
+					}, 100);
+				}
 			}
 		}
 

diff --git a/src/Utils/Utils.ts b/src/Utils/Utils.ts
@@ -186,12 +186,4 @@ export function isValidUri(u: string): boolean {
 	else {
 		return false
 	}
-}
-
-/** 
- * Scrolls the element into view. Implemented as scrollIntoView doesn't work consistently on mobile (iOS, at least).
- */
-export function scrollElementIntoView(parent: HTMLElement, element: HTMLElement) {
-	const scrollOffset = element.getBoundingClientRect().top + element.scrollTop;
-	parent.scrollTo({ top: scrollOffset, behavior: 'auto' });
 }