jsdialog: fix problem with getting buttons with unique id

- MakeIdUnique makes id changed by adding suffix
- Then we had problem to find the element as we used DOM id
- This patch saves original id as additional attribute
- When lookup is done we use it first

Signed-off-by: Szymon Kłos <[email protected]>
Change-Id: Ia97973a8713bff87329fb74e5e4b870b4675a16b

Author: eszkadev

browser/src/control/Control.JSDialogBuilder.js

@@ -1860,8 +1860,14 @@ window.L.Control.JSDialogBuilder = window.L.Control.extend({
 			if (data.command)
 				window.L.DomUtil.addClass(div, data.command.replace(':', '').replace('.', ''));
 
-			if (isRealUnoCommand)
+			if (isRealUnoCommand) {
+				// there is a problem with JSON crafted manually on the JS side
+				// we do not have warranty the id we passed is the one used in the DOM
+				// updates might then fail to find such item
+				// we need to remember the original ID
+				div.setAttribute('modelId', id);
 				id = JSDialog.MakeIdUnique(id);
+			}
 
 			div.id = id;
 			data.id = id; // change in input data for postprocess
@@ -2392,15 +2398,24 @@ window.L.Control.JSDialogBuilder = window.L.Control.extend({
 		builder._explorableMenu(parentContainer, title, data.children, builder, content, data.id);
 	},
 
+	_getItemById: function(container, id) {
+		const plainId = this._removeMenuId(id);
+		// prefer the modelId first which is unique within single component, DOM id might be changed due to conflict
+		let control = container.querySelector('[modelId=\'' + plainId + '\']');
+		if (!control)
+			control = container.querySelector('[id=\'' + plainId + '\']');
+		return control;
+	},
+
 	// executes actions like changing the selection without rebuilding the widget
 	executeAction: function(container, data) {
 		app.layoutingService.appendLayoutingTask(() => { this.executeActionImpl(container, data); });
 	},
 
 	executeActionImpl: function(container, data) {
-		var control = container.querySelector('[id=\'' + this._removeMenuId(data.control_id) + '\']');
+		let control = this._getItemById(container, this._removeMenuId(data.control_id));
 		if (!control && data.control)
-			control = container.querySelector('[id=\'' + this._removeMenuId(data.control.id) + '\']');
+			control = this._getItemById(container, this._removeMenuId(data.control.id));
 		if (!control) {
 			window.app.console.warn('executeAction: not found control with id: "' + data.control_id + '"');
 			return;
@@ -2542,8 +2557,8 @@ window.L.Control.JSDialogBuilder = window.L.Control.extend({
 	},
 
 	_updateWidgetImpl: function (container, data, buildFunc) {
-		var elementId = this._removeMenuId(data.id);
-		var control = container.querySelector('[id=\'' + elementId + '\']');
+		const elementId = this._removeMenuId(data.id);
+		const control = this._getItemById(container, elementId);
 		if (!control) {
 			window.app.console.warn('jsdialogupdate: not found control with id: "' + elementId + '"');
 			return;

browser/src/control/jsdialog/Component.Toolbar.ts

@@ -126,8 +126,14 @@ class Toolbar extends JSDialogComponent {
 		this.create();
 	}
 
+	getItemElement(id: string) {
+		let item = this.parentContainer?.querySelector('[modelId="' + id + '"]');
+		if (!item) item = this.parentContainer?.querySelector('[id="' + id + '"]');
+		return item;
+	}
+
 	isItemHidden(id: string): boolean {
-		const item = this.parentContainer?.querySelector('[id="' + id + '"]');
+		const item = this.getItemElement(id);
 		if (!item) return true;
 		return item.classList.contains('hidden');
 	}
@@ -149,7 +155,7 @@ class Toolbar extends JSDialogComponent {
 	}
 
 	isItemDisabled(id: string): boolean {
-		const item = this.parentContainer.querySelector('[id="' + id + '"]');
+		const item = this.getItemElement(id);
 		if (!item) return true;
 		return (
 			item.hasAttribute('disabled') && item.getAttribute('disabled') !== 'false'