diff mbox series

[yocto-autobuilder2] releaseselector: Fix page scroll on selector use

Message ID 20250224-mathieu-release_selector_scroll-v1-1-b0deb510d91f@bootlin.com
State New
Headers show
Series [yocto-autobuilder2] releaseselector: Fix page scroll on selector use | expand

Commit Message

Mathieu Dubois-Briand Feb. 24, 2025, 9:16 a.m. UTC
When using selectors, all fields modified by the selector will be
successively focused, inducing a potential page scroll. Save current
scroll before applying the release selector and set back this scroll
once the selector has been applied, setting back the page at the same
position.

Signed-off-by: Mathieu Dubois-Briand <mathieu.dubois-briand@bootlin.com>
---
 yocto_console_view/src/releaseselectorfield.ts | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)


---
base-commit: 62d5d77167a427d87516a6503137a3b2f264cfd5
change-id: 20250224-mathieu-release_selector_scroll-275dc6a2ac53

Best regards,
diff mbox series

Patch

diff --git a/yocto_console_view/src/releaseselectorfield.ts b/yocto_console_view/src/releaseselectorfield.ts
index 93ce46382f95..db707ef09174 100644
--- a/yocto_console_view/src/releaseselectorfield.ts
+++ b/yocto_console_view/src/releaseselectorfield.ts
@@ -117,6 +117,13 @@  buildbotSetupPlugin((reg) => {
 	 * Apply values from the selected field selector
 	 */
 	async function applySelector(selector, selectorName) {
+		const modalBody = document.getElementsByClassName("modal-body")[0];
+		let scrolltop = 0, scrollleft = 0;
+		if (modalBody) {
+			scrolltop = modalBody.scrollTop;
+			scrollleft = modalBody.scrollLeft;
+		}
+
 		for (let [field, value] of Object.entries(selector)) {
 			const input = inputRefs.get('force-field-' + field);
 			if (input && input.value != value) {
@@ -132,6 +139,16 @@  buildbotSetupPlugin((reg) => {
 		const releaseSelector = inputRefs.get('force-field-branchselector');
 		releaseSelector.parentNode.previousSibling.textContent = selectorName;
 		releaseSelector.focus();
+
+		/* Scroll back to the initial position. */
+		if (modalBody) {
+			modalBody.scroll(scrollleft, scrolltop)
+
+			setTimeout(() => {
+				modalBody.scroll(scrollleft, scrolltop);
+			}, 1);
+
+		}
 	}
 
 	/*