From decd64e7c377df9c806995c0ee11b528b95ebf62 Mon Sep 17 00:00:00 2001
From: nathan <nathangray.bsc+github@gmail.com>
Date: Tue, 14 Sep 2021 16:01:22 -0600
Subject: [PATCH] Getter/Setter shenanigans to  - get widget's DOM ID to have
 the instance template as prefix  - keep widget.id as what's in the template,
 matching legacy  - widget.dom_id gives the DOM ID, matching legacy

---
 api/js/etemplate/Et2Widget/Et2Widget.ts | 40 ++++++++++++++++++++++++-
 1 file changed, 39 insertions(+), 1 deletion(-)

diff --git a/api/js/etemplate/Et2Widget/Et2Widget.ts b/api/js/etemplate/Et2Widget/Et2Widget.ts
index 77f482e080..04b166b61f 100644
--- a/api/js/etemplate/Et2Widget/Et2Widget.ts
+++ b/api/js/etemplate/Et2Widget/Et2Widget.ts
@@ -61,6 +61,8 @@ const Et2WidgetMixin = (superClass) =>
 		/**
 		 * Properties - default values, and actually creating them as fields
 		 */
+		protected _widget_id : string = "";
+		protected _dom_id : string = "";
 		protected _label : string = "";
 		private statustext : string = "";
 		protected disabled : Boolean = false;
@@ -196,6 +198,42 @@ const Et2WidgetMixin = (superClass) =>
 			this.disabled = value;
 		}
 
+		/**
+		 * Get the actual DOM ID, which has been prefixed to make sure it's unique.
+		 *
+		 * @returns {string}
+		 */
+		get dom_id()
+		{
+			return this.getAttribute("id");
+		}
+
+		/**
+		 * Set the ID of the widget
+		 *
+		 * This is the "widget" ID, which is used as an index into the managed arrays (content, etc) and when
+		 * trying to find widgets by ID.
+		 *
+		 * This is not the DOM ID.
+		 *
+		 * @param {string} value
+		 */
+		set id(value)
+		{
+			this._widget_id = value;
+			this.setAttribute("id", this._widget_id ? this.getInstanceManager().uniqueId + '_' + this._widget_id.replace(/\./g, '-') : "");
+		}
+
+		/**
+		 * Get the ID of the widget
+		 *
+		 * @returns {string}
+		 */
+		get id()
+		{
+			return this._widget_id;
+		}
+
 		set label(value : string)
 		{
 			let oldValue = this.label;
@@ -658,7 +696,7 @@ const Et2WidgetMixin = (superClass) =>
 
 		getDOMNode() : HTMLElement
 		{
-			return this;
+			return <HTMLElement><unknown>this;
 		}
 
 		/**