Merge pull request #2761 from jevenski/rename-view

Fix dialog window text input unfocusable
Novik · Oct 25, 2024 · fd914d7 · fd914d7
2 parents cd4ddec + cd98bc2
commit fd914d7
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 42 deletions.
diff --git a/css/category-panel.css b/css/category-panel.css
@@ -22,10 +22,6 @@ div[part=heading] {
 	margin: 0px;
 	line-height: 16px;
 	cursor: pointer;
-	-moz-user-select: none;
-	-moz-user-focus: normal;
-	-moz-user-input: enabled;
-	user-select: none;
 }
 
 :host([hidden]) {

diff --git a/index.html b/index.html
@@ -152,19 +152,8 @@ <h4 class="offcanvas-title" id="offcanvas-sidepanel-label"></h4>
 							</div>
 							<slot name="content"></slot>
 						</template>
-						<template id="pview-rename-dialog-template">
-							<div class="content row">
-								<div class="col-12">
-									<input type="text" onfocus="this.select()"/>
-								</div>
-							</div>
-							<div class="buttons-list">
-								<button class="Button" value="confirm" uilang>ok</button>
-								<button class="Button Cancel" uilang>Cancel</button>
-							</div>
-						</template>
 						<category-list id="CatList">
-							<category-panel id="pview" uilangtext="pnlViews" class="d-none d-md-block">
+							<category-panel id="pview" uilangtext="pnlViews">
 								<input slot="decorator" class="Button" type="button" value="+" uilangtitle="SaveCurrentView" id="pview_save_view_button" />
 								<panel-label id="pview_all" icon="all" uilangtext="All" selected></panel-label>
 							</category-panel>

diff --git a/js/objects.js b/js/objects.js
@@ -198,17 +198,23 @@ var theDialogManager = {
        		$('#modalbg').hide();
 		this.modalState = false;
 	},
-	show: function( id, callback )
-	{
-	        var obj = $('#'+id);
-	        if(obj.data("modal"))
+	show: function(id, callback) {
+		// Close side panel on mobile:
+		// An offcanvas is a modal under the hood and will intercept focus events
+		// from other elements, and make other text inputs unfocusable and uneditable.
+		if ($(window).width() < 768) {
+			bootstrap.Offcanvas.getInstance($("#offcanvas-sidepanel")[0]).hide();
+		}
+
+		const obj = $('#' + id);
+		if (obj.data("modal"))
 			this.setModalState();
-	      	if($type(this.items[id]) && ($type(this.items[id].beforeShow)=="function"))
-	        	this.items[id].beforeShow(id);
+		if ($type(this.items[id]) && ($type(this.items[id].beforeShow)=="function"))
+			this.items[id].beforeShow(id);
 		this.center(id);
-		obj.show(obj.data("modal") ? null : this.divider,callback); 
-        	if($type(this.items[id]) && ($type(this.items[id].afterShow)=="function"))
-	        	this.items[id].afterShow(id);
+		obj.show(obj.data("modal") ? null : this.divider, callback);
+		if ($type(this.items[id]) && ($type(this.items[id].afterShow)=="function"))
+			this.items[id].afterShow(id);
 		this.bringToTop(id);
 	},
 	hide: function(id, callback) {

diff --git a/js/webui.js b/js/webui.js
@@ -2500,17 +2500,24 @@ function createCategoryList(catModule) {
 	theDialogManager.make(
 		"dlgRenameView",
 		theUILang.RenameView,
-		$$('pview-rename-dialog-template').innerHTML,
-		true
-	);
-	$$('dlgRenameView')
-		.querySelector('button[value="confirm"]')
-		.addEventListener("click", function () {
-			const dialogEl = $$('dlgRenameView');
-			const inputEl = dialogEl.querySelector('input[type="text"]');
-			categoryList.renameView(inputEl.dataset.viewId, inputEl.value);
-			theDialogManager.hide('dlgRenameView');
-		},
+		[
+			$("<div>").addClass("cont").append(
+				$("<div>").addClass("row").append(
+					$("<div>").addClass("col-12").append(
+						$("<input>").attr({type:"text"}).on("focus", (ev) => ev.target.select()),
+					),
+				),
+			),
+			$("<div>").addClass("buttons-list").append(
+				$("<button>").val("confirm").on("click", () => {
+					const inputEl = $("#dlgRenameView input[type=text]");
+					categoryList.renameView(inputEl.data("view-id"), inputEl.val())
+					theDialogManager.hide('dlgRenameView');
+				}).text(theUILang.ok),
+				$("<button>").addClass("Cancel").text(theUILang.Cancel),
+			),
+		],
+		true,
 	);
 	const categoryList = new catModule.CategoryList({
 		panelAttribs: catList.panelAttribs,
@@ -2542,12 +2549,8 @@ function createCategoryList(catModule) {
 		onConfigChangeFn: theWebUI.save.bind(theWebUI),
 		byteSizeToStringFn: (size) => theConverter.bytes(size, 'catlist'),
 		renameViewDialogFn: (viewId, viewName) => {
-			const dialogEl = $$('dlgRenameView');
-			const inputEl = dialogEl.querySelector('input[type="text"]');
-			inputEl.value = viewName;
-			inputEl.dataset.viewId = viewId;
-			theDialogManager.show(dialogEl.id);
-			inputEl.focus();
+			theDialogManager.show("dlgRenameView");
+			$("#dlgRenameView input[type=text]").val(viewName).data({"view-id":viewId}).trigger("focus");
 		},
 		dStatus,
 		theUILang