fix: check if value is not undefined

source/components/form/select.mjs

@@ -262,7 +262,9 @@ const FILTER_POSITION_POPPER = "popper";
 const FILTER_POSITION_INLINE = "inline";
 
 /**
- * A select control that can be used to select one or more options from a list.
+ * A select control that can be used to select o
+ *
+ * ne or more options from a list.
  *
  * @issue @issue https://localhost.alvine.dev:8444/development/issues/closed/280.html
  *
@@ -338,7 +340,8 @@ class Select extends CustomControl {
         const result = convertValueToSelection.call(this, value);
         setSelection
             .call(this, result.selection)
-			.then(() => {})
+            .then(() => {
+            })
             .catch((e) => {
                 addErrorAttribute(this, e);
             });
@@ -350,55 +353,55 @@ class Select extends CustomControl {
      *
      * The individual configuration values can be found in the table.
      *
-	 * @property {Object} toggleEventType=click,touch List of event types to be observed for opening the dropdown
-	 * @property {boolean} delegatesFocus=false lorem [see mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)
+     * @property {Object} toggleEventType List of event types to be observed for opening the dropdown
+     * @property {boolean} delegatesFocus lorem [see mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)
      * @property {Object[]} options Selection of key identifier pairs available for selection and displayed in the dropdown.
      * @property {string} options[].label
      * @property {string} options[].value
      * @property {string} options[].visibility hidden or visible
      * @property {Array} selection Selected options
-	 * @property {Integer} showMaxOptions=10 Maximum number of visible options before a scroll bar should be displayed.
-	 * @property {string} type=radio Multiple (checkbox) or single selection (radio)
-	 * @property {string} name=(random id) Name of the form field
+     * @property {Integer} showMaxOptions Maximum number of visible options before a scroll bar should be displayed.
+     * @property {string} type Multiple (checkbox) or single selection (radio)
+     * @property {string} name Name of the form field
      * @property {string} url Load options from server per url
      * @property {object} lookup Load options from server per url
-	 * @property {string} lookup.url=null Load options from server per url
-	 * @property {boolean} lookup.grouping=false Load all selected options from server per url at once (true) or one by one (false)
+     * @property {string} lookup.url Load options from server per url
+     * @property {boolean} lookup.grouping Load all selected options from server per url at once (true) or one by one (false)
      * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
-	 * @property {String} fetch.redirect=error
-	 * @property {String} fetch.method=GET
-	 * @property {String} fetch.mode=same-origin
-	 * @property {String} fetch.credentials=same-origin
-	 * @property {Object} fetch.headers={"accept":"application/json"}}
+     * @property {String} fetch.redirect
+     * @property {String} fetch.method
+     * @property {String} fetch.mode
+     * @property {String} fetch.credentials
+     * @property {Object} fetch.headers
      * @property {Object} labels
      * @property {string} labels.cannot-be-loaded cannot be loaded
      * @property {string} labels.no-options-available no options available
      * @property {string} labels.select-an-option select an option
      * @property {string} labels.no-option no option in the list, maybe you have to change the filter
      * @property {Object} features List with features
-	 * @property {Boolean} features.clearAll=true Display of a delete button to delete the entire selection
-	 * @property {Boolean} features.clear=true Display of a delete key for deleting the specific selection
-	 * @property {Boolean} features.lazyLoad=false Load options when first opening the dropdown. (Hint; lazylLoad is not supported with remote filter)
-	 * @property {Boolean} features.closeOnSelect=false Close the dropdown when an option is selected (since 3.54.0)
-	 * @property {Boolean} features.emptyValueIfNoOptions=false If no options are available, the selection is set to an empty array
-	 * @property {Boolean} features.storeFetchedData=false Store fetched data in the object
-	 * @property {Boolean} features.useStrictValueComparison=true Use strict value comparison for the selection
-	 * @property {string} filter.defaultValue=null Default filter value, if the filter is empty, if the default value is null, then no request is made
-	 * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled (Hint; lazylLoad is not supported with remote filter, if you use remote filter, the lazyLoad is disabled)
+     * @property {Boolean} features.clearAll Display of a delete button to delete the entire selection
+     * @property {Boolean} features.clear Display of a delete key for deleting the specific selection
+     * @property {Boolean} features.lazyLoad Load options when first opening the dropdown. (Hint; lazylLoad is not supported with remote filter)
+     * @property {Boolean} features.closeOnSelect Close the dropdown when an option is selected (since 3.54.0)
+     * @property {Boolean} features.emptyValueIfNoOptions If no options are available, the selection is set to an empty array
+     * @property {Boolean} features.storeFetchedData Store fetched data in the object
+     * @property {Boolean} features.useStrictValueComparison Use strict value comparison for the selection
+     * @property {string} filter.defaultValue Default filter value, if the filter is empty, if the default value is null, then no request is made
+     * @property {Boolean} filter.mode Filter mode, values: options, remote, disabled (Hint; lazylLoad is not supported with remote filter, if you use remote filter, the lazyLoad is disabled)
      * @property {Object} templates Template definitions
      * @property {string} templates.main Main template
      * @property {string} templateMapping Mapping of the template placeholders
      * @property {string} templateMapping.selected Selected Template
      * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-	 * @property {string} popper.placement=bottom PopperJS placement
-	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+     * @property {string} popper.placement PopperJS placement
+     * @property {Object[]} modifiers PopperJS placement
      * @property {Object} mapping
-	 * @property {String} mapping.selector=* Path to select the appropriate entries
-	 * @property {String} mapping.labelTemplate="" template with the label placeholders in the form ${name}, where name is the key (**)
-	 * @property {String} mapping.valueTemplate="" template with the value placeholders in the form ${name}, where name is the key
-	 * @property {Monster.Components.Form~exampleFilterCallback|undefined} mapping.filter Filtering of values via a function
+     * @property {String} mapping.selector Path to select the appropriate entries
+     * @property {String} mapping.labelTemplate template with the label placeholders in the form ${name}, where name is the key (**)
+     * @property {String} mapping.valueTemplate template with the value placeholders in the form ${name}, where name is the key
+     * @property {function|undefined} mapping.filter Filtering of values via a function
      * @property {Object} formatter
-	 * @property {Monster.Components.Form~formatterSelectionCallback|undefined} formatter.selection format selection label
+     * @property {function|undefined} formatter.selection format selection label
      */
     get defaults() {
         return Object.assign(
@@ -521,17 +524,19 @@ class Select extends CustomControl {
             }
         }
 
+        requestAnimationFrame(() => {
             let lastValue = self.value;
             self[internalSymbol].attachObserver(
                 new Observer(function () {
                     if (isObject(this) && this instanceof ProxyObserver) {
                         const n = this.getSubject()?.options?.value;
 
-					if (lastValue !== n) {
+                        if (lastValue !== n && n !== undefined) {
                             lastValue = n;
                             setSelection
                                 .call(self, n)
-							.then(() => {})
+                                .then(() => {
+                                })
                                 .catch((e) => {
                                     addErrorAttribute(self, e);
                                 });
@@ -541,6 +546,7 @@ class Select extends CustomControl {
             );
 
             areOptionsAvailableAndInit.call(self);
+        });
 
         return this;
     }
@@ -721,7 +727,8 @@ class Select extends CustomControl {
         setTimeout(() => {
             setSelection
                 .call(this, this.getOption("selection"))
-				.then(() => {})
+                .then(() => {
+                })
                 .catch((e) => {
                     addErrorAttribute(this, e);
                 });
@@ -1365,7 +1372,8 @@ function getDefaultTranslation() {
     try {
         const doc = getDocumentTranslations();
         translation.locale = doc.locale;
-	} catch (e) {}
+    } catch (e) {
+    }
 
     return translation;
 }
@@ -1420,7 +1428,7 @@ function getOptionElements() {
 /**
  * With the help of this filter callback, values can be filtered out. Only if the filter function returns true, the value is taken for the map.
  *
- * @callback Monster.Components.Form~exampleFilterCallback
+ * @callback function
  * @param {*} value Value
  * @param {string} key  Key
  * @see Monster.Data.buildMap
@@ -1985,7 +1993,8 @@ function gatherState() {
 
     setSelection
         .call(this, selection)
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addErrorAttribute(this, e);
         });
@@ -2014,7 +2023,8 @@ function clearSelection() {
 
     setSelection
         .call(this, [])
-		.then(() => {})
+        .then(() => {
+        })
         .catch((e) => {
             addErrorAttribute(this, e);
         });