From 36e3bd5de0730977ad326ab7d747ba6b0bb92fed Mon Sep 17 00:00:00 2001
From: ralf <rb@egroupware.org>
Date: Tue, 1 Mar 2022 16:51:40 +0200
Subject: [PATCH] fix typo modalValue instead of modelValue to get validation
 (required) working Had to overwrite formatter as it gave an error for
 accessing not yet set _inputNode

---
 api/js/etemplate/Et2Select/Et2Select.ts       | 14 ++++++------
 .../Et2Select/Et2WidgetWithSelectMixin.ts     | 22 ++++++++++++++++---
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/api/js/etemplate/Et2Select/Et2Select.ts b/api/js/etemplate/Et2Select/Et2Select.ts
index e6aece169d..f882b21fa2 100644
--- a/api/js/etemplate/Et2Select/Et2Select.ts
+++ b/api/js/etemplate/Et2Select/Et2Select.ts
@@ -93,14 +93,14 @@ export class Et2Select extends Et2WidgetWithSelect
 		if (changedProperties.has('select_options') || changedProperties.has("value") || changedProperties.has('empty_label'))
 		{
 			// value not in options AND NOT (having an empty label and value)
-			if (this.get_select_options().length > 0 && this.get_select_options().filter((option) => option.value == this.modalValue).length === 0 &&
-				!(typeof this.empty_label !== 'undefined' && (this.modalValue||"") === ""))
+			if (this.get_select_options().length > 0 && this.get_select_options().filter((option) => option.value == this.modelValue).length === 0 &&
+				!(typeof this.empty_label !== 'undefined' && (this.modelValue||"") === ""))
 			{
 				// --> use first option
-				this.modalValue = ""+this.get_select_options()[0]?.value;	// ""+ to cast value of 0 to "0", to not replace with ""
+				this.modelValue = ""+this.get_select_options()[0]?.value;	// ""+ to cast value of 0 to "0", to not replace with ""
 			}
 			// Re-set value, the option for it may have just shown up
-			this._inputNode.value = this.modalValue || "";
+			this._inputNode.value = this.modelValue || "";
 		}
 	}
 
@@ -111,13 +111,13 @@ export class Et2Select extends Et2WidgetWithSelect
 			return html``;
 		}
 		return html`
-            <option value="" ?selected=${!this.modalValue}>${this.empty_label}</option>`;
+            <option value="" ?selected=${!this.modelValue}>${this.empty_label}</option>`;
 	}
 
 	_optionTemplate(option : SelectOption) : TemplateResult
 	{
 		return html`
-            <option value="${option.value}" title="${option.title}" ?selected=${option.value == this.modalValue}>
+            <option value="${option.value}" title="${option.title}" ?selected=${option.value == this.modelValue}>
                 ${option.label}
             </option>`;
 	}
@@ -158,7 +158,7 @@ export class Et2SelectBitwise extends Et2Select
 				expanded_value.push(right);
 			}
 		}
-		this.modalValue = expanded_value;
+		this.modelValue = expanded_value;
 
 		this.requestUpdate("value", oldValue);
 	}
diff --git a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
index 1b3ea1cc10..68130fef72 100644
--- a/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
+++ b/api/js/etemplate/Et2Select/Et2WidgetWithSelectMixin.ts
@@ -67,14 +67,30 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 			}
 		}
 
+		/**
+		 * Overwritten as sometimes called before this._inputNode is available
+		 *
+		 * @param {*} v - modelValue: can be an Object, Number, String depending on the
+		 * input type(date, number, email etc)
+		 * @returns {string} formattedValue
+		 */
+		formatter(v)
+		{
+			if (!this._inputNode)
+			{
+				return v;
+			}
+			return super.formatter(v);
+		}
+
 		set_value(val)
 		{
-			let oldValue = this.modalValue;
+			let oldValue = this.modelValue;
 
 			// Make sure it's a string
 			val = "" + val;
 
-			this.modalValue = val
+			this.modelValue = val
 			this.requestUpdate("value", oldValue);
 		}
 
@@ -151,4 +167,4 @@ export const Et2widgetWithSelectMixin = dedupeMixin((superclass) =>
 		}
 	}
 	return Et2WidgetWithSelect;
-});
+});
\ No newline at end of file