neo.mjs 6.12.1 → 6.13.0

package/src/form/field/Search.mjs

@@ -33,6 +33,6 @@ class Search extends Text {
     }
 }
 
-Neo.applyClassConfig(Search);
+Neo.setupClass(Search);
 
 export default Search;

package/src/form/field/Select.mjs

@@ -1,14 +1,15 @@
+import { buffer }       from '../../util/Function.mjs';
 import ClassSystemUtil  from '../../util/ClassSystem.mjs';
 import ComponentManager from '../../manager/Component.mjs';
 import List             from '../../list/Base.mjs';
 import Picker           from './Picker.mjs';
 import Store            from '../../data/Store.mjs';
 import VDomUtil         from '../../util/VDom.mjs';
-import { buffer }       from '../../util/Function.mjs';
+
 /**
  * Provides a dropdown list to select one or multiple items.
  *
- * Conforms to ARIA accessiblity standards outlines in https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ * Conforms to ARIA accessibility standards outlines in https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
  * @class Neo.form.field.Select
  * @extends Neo.form.field.Picker
  */
@@ -57,9 +58,9 @@ class Select extends Picker {
         /**
          * True will only fire a change event, in case the TextField input value matches a record.
          * onFocusLeave() will try to select a hint record, if needed and possible.
-         * @member {Boolean} forceSelection=false
+         * @member {Boolean} forceSelection=true
          */
-        forceSelection: false,
+        forceSelection: true,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -131,10 +132,12 @@ class Select extends Picker {
     construct(config) {
         super.construct(config);
 
+        let me = this;
+
         // Create buffered function to respond to input field mutation
-        this.filterOnInput = buffer(this.filterOnInput, this, this.filterDelay);
+        me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
 
-        this.typeAhead && this.updateTypeAhead()
+        me.typeAhead && me.updateTypeAhead()
     }
 
     /**
@@ -145,14 +148,13 @@ class Select extends Picker {
      */
     afterSetRecord(value, oldValue) {
         if (this._picker?.isVisible) {
-            let me             = this,
-                selectionModel = me.list?.selectionModel;
+            let selectionModel = this.list?.selectionModel;
 
             if (value) {
-                selectionModel?.select(value);
-            }
-            else {
-                selectionModel.deselectAll();
+                oldValue && selectionModel?.deselect(oldValue);
+                selectionModel?.select(value)
+            } else {
+                selectionModel.deselectAll()
             }
         }
     }
@@ -302,15 +304,16 @@ class Select extends Picker {
         const me = this;
 
         me.list = Neo.create({
-            module          : List,
-            appName         : me.appName,
-            displayField    : me.displayField,
-            itemRole        : 'option',
-            navigator       : {eventSource : me.getInputElId()},
-            parentId        : me.id,
-            role            : 'listbox',
-            selectionModel  : {stayInList: false},
-            store           : me.store,
+            module        : List,
+            appName       : me.appName,
+            displayField  : me.displayField,
+            itemRole      : 'option',
+            itemsFocusable: false,
+            navigator     : {eventSource: me.getInputElId()},
+            parentId      : me.id,
+            role          : 'listbox',
+            selectionModel: {stayInList: false},
+            store         : me.store,
             ...me.listConfig
         });
 
@@ -318,16 +321,16 @@ class Select extends Picker {
 
         me.list.addDomListeners({
             neonavigate: {
-                fn    : me.onListItemNavigate,
-                scope : me
+                fn   : me.onListItemNavigate,
+                scope: me
             }
         });
 
         me.list.selectionModel.on({
-            noChange        : me.onListItemSelectionNoChange,
-            selectionChange : me.onListItemSelectionChange,
-            scope           : me
-        })
+            noChange       : me.onListItemSelectionNoChange,
+            selectionChange: me.onListItemSelectionChange,
+            scope          : me
+        });
 
         return me.list;
     }
@@ -344,18 +347,19 @@ class Select extends Picker {
      */
     doFilter(value) {
         let me     = this,
-            filter = me.store.getFilter(me.displayField),
+            store  = me.store,
+            filter = store.getFilter(me.displayField),
             {
-                record,
-                picker
+                picker,
+                record
             }      = me;
 
         if (filter) {
-            filter.value = value;
+            filter.value = value
         }
 
         // Filter resulting in something to show
-        if (me.store.getCount()) {
+        if (store.getCount()) {
             me.getPicker().hidden = false;
 
             // List might not exist until the picker is created
@@ -368,15 +372,17 @@ class Select extends Picker {
                 // We do not want to hear back about our own selection
                 selectionModel.suspendEvents = true;
                 selectionModel.select(record);
-                selectionModel.suspendEvents = false;
+                selectionModel.suspendEvents = false
             }
             setTimeout(() => {
-                list.activeIndex = me.record || 0;
+                const index = store.indexOf(record);
+                list._focusIndex = -1; // silent update to ensure afterSetFocusIndex() always gets called
+                list.focusIndex  = index > -1 ? index : 0
             }, 100)
         }
         // Filtered down to nothing - hide picker if it has been created.
-        else if (picker) {
-            picker._hidden = true;
+        else {
+            picker?.hide()
         }
     }
 
@@ -385,10 +391,9 @@ class Select extends Picker {
      */
     filterOnInput(data) {
         if (data.value) {
-            this.doFilter(data.value);
-        }
-        else if (this.picker) {
-            this.picker?.hide();
+            this.doFilter(data.value)
+        } else {
+            this.picker?.hide()
         }
     }
 
@@ -482,22 +487,10 @@ class Select extends Picker {
     onFocusLeave(data) {
         let me = this;
 
-        if (!me.record) {
-            if (me.forceSelection) {
-                me.value = me.forceSelection ? me.activeRecordId : null;
-            }
-            // If we exit without selecting a record, clear the filter input value.
-            else {
-                me.getInputEl().value = '';
-            }
-        }
+        console.log(me.forceSelection, me.record, me.activeRecordId);
 
-        // Clear any typeahead hint
-        me.updateTypeAheadValue('');
-
-        // The VDOM must not carry the empty string permanently. Only while clearing the value.
-        if (!me.record && !me.forceSelection) {
-            delete me.getInputEl().value;
+        if (me.forceSelection && !me.record) {
+            me.value = me.store.get(me.activeRecordId)
         }
 
         super.onFocusLeave(data)
@@ -519,8 +512,10 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownDown(data) {
-        if (!this.picker || this.picker?.hidden) {
-            this.onPickerTriggerClick();
+        let me = this;
+
+        if (!me.picker || me.picker?.hidden) {
+            me.onPickerTriggerClick()
         }
     }
 
@@ -577,8 +572,8 @@ class Select extends Picker {
                 me        = this,
                 { store } = me;
 
-            me.activeRecord = store.getAt(activeIndex)
-            me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty]
+            me.activeRecord   = store.getAt(activeIndex);
+            me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty];
 
             // Update typeahead hint (which updates DOM), or update DOM
             me.typeAhead ? me.updateTypeAheadValue(me.lastManualInput) : me.update();
@@ -606,7 +601,7 @@ class Select extends Picker {
         let me = this;
 
         if (me.picker?.isVisible) {
-            me.picker.hidden = true;
+            me.picker.hidden = true
         }
         else if (!me.readOnly && !me.disabled) {
             me.doFilter(null)
@@ -690,8 +685,8 @@ class Select extends Picker {
     }
 
     /**
-     * @param {String|null} [value=this.lastManualInput]
-     * @param {Boolean} [silent=false]
+     * @param {String|null} value=this.lastManualInput
+     * @param {Boolean} silent=false
      * @protected
      */
     updateTypeAheadValue(value=this.lastManualInput, silent=false) {
@@ -731,6 +726,6 @@ class Select extends Picker {
  * @returns {Object}
  */
 
-Neo.applyClassConfig(Select);
+Neo.setupClass(Select);
 
 export default Select;

package/src/form/field/Switch.mjs

@@ -38,6 +38,6 @@ class Switch extends CheckBox {
     }
 }
 
-Neo.applyClassConfig(Switch);
+Neo.setupClass(Switch);
 
 export default Switch;

package/src/form/field/Text.mjs

@@ -137,6 +137,10 @@ class Text extends Base {
          * @member {String} inputType_='text'
          */
         inputType_: 'text',
+        /**
+         * @member {String|null} inputValue_=null
+         */
+        inputValue_: null,
         /**
          * @member {String[]} labelBaseCls=['neo-textfield-label']
          */
@@ -281,8 +285,8 @@ class Text extends Base {
 
         me.addDomListeners([
             {input     : me.onInputValueChange, scope: me},
-            {mouseenter: me.onMouseEnter, scope: me},
-            {mouseleave: me.onMouseLeave, scope: me}
+            {mouseenter: me.onMouseEnter,       scope: me},
+            {mouseleave: me.onMouseLeave,       scope: me}
         ])
     }
 
@@ -296,7 +300,7 @@ class Text extends Base {
         super.afterSetAppName(value, oldValue);
 
         value && this.triggers?.forEach(item => {
-            item.appName = value;
+            item.appName = value
         })
     }
 
@@ -458,7 +462,7 @@ class Text extends Base {
         if (this.inputPatternDOM) {
             if (value) {
                 value = value.toString();
-                value = value.substring(1, value.length - 1);
+                value = value.substring(1, value.length - 1)
             }
 
             this.changeInputElKey('pattern', value)
@@ -475,6 +479,26 @@ class Text extends Base {
         this.changeInputElKey('type', value)
     }
 
+    /**
+     * Triggered after the inputValue config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
+     * @protected
+     */
+    afterSetInputValue(value, oldValue) {
+        let me  = this,
+            cls = me.cls;
+
+        me.getInputEl().value = me.containsFocus ? value : me.inputValueRenderer(value);
+
+        me.useAlertState && NeoArray.toggle(cls, 'neo-empty-required', me.isEmpty() && me.required);
+
+        NeoArray.toggle(cls, 'neo-has-content', me.hasContent());
+        me.cls = cls;
+
+        me.value = me.updateValueFromInputValue(value)
+    }
+
     /**
      * Triggered after the labelCls config got changed
      * @param {String[]} value
@@ -524,7 +548,7 @@ class Text extends Base {
 
             vdom.cn[0].removeDom = me.hideLabel;
             vdom.cn[0].width     = me.labelWidth;
-            me.updateInputWidth();
+            me.updateInputWidth()
         } else if (value === 'inline') {
             centerBorderElCls = ['neo-center-border'];
             isEmpty           = me.isEmpty();
@@ -577,7 +601,7 @@ class Text extends Base {
         if (!me.hideLabel) {
             if (me.labelPosition === 'inline') {
                 if (!isEmpty) {
-                    delete me.getCenterBorderEl()?.width;
+                    delete me.getCenterBorderEl()?.width
                 }
 
                 me.promiseUpdate().then(() => {
@@ -817,9 +841,9 @@ class Text extends Base {
                     width: inputEl.width
                 };
 
-                delete inputEl.width;
+                delete inputEl.width
             } else {
-                inputEl.cn = [...preTriggers, me.getInputEl(), ...postTriggers];
+                inputEl.cn = [...preTriggers, me.getInputEl(), ...postTriggers]
             }
         } else {
             if (inputEl.tag !== 'input') {
@@ -837,7 +861,6 @@ class Text extends Base {
 
     /**
      * Triggered after the value config got changed
-     * todo: add validation logic
      * @param {String} value
      * @param {String} oldValue
      * @protected
@@ -849,17 +872,12 @@ class Text extends Base {
             cls;
 
         me.silentVdomUpdate = true;
-
-        me.getInputEl().value = me.containsFocus ? value : me.inputValueRenderer(value);
+        me.inputValue       = me.updateInputValueFromValue(value);
 
         me.validate(); // silent
 
         cls = me.cls;
-
-        me.useAlertState && NeoArray.toggle(cls, 'neo-empty-required', me.isEmpty() && me.required);
-
-        NeoArray[me.hasContent() ? 'add' : 'remove'](cls, 'neo-has-content');
-        NeoArray[isDirty ? 'add' : 'remove'](cls, 'neo-is-dirty');
+        NeoArray.toggle(cls, 'neo-is-dirty', isDirty);
         me.cls = cls;
 
         me.silentVdomUpdate = false;
@@ -880,6 +898,18 @@ class Text extends Base {
         this.updateInputWidth()
     }
 
+    /**
+     * Triggered after the windowId config got changed
+     * @param {Number} value
+     * @param {Number|null} oldValue
+     * @protected
+     */
+    afterSetWindowId(value, oldValue) {
+        value && this.triggers?.forEach(item => {
+            item.windowId = value
+        })
+    }
+
     /**
      * Return a shallow copy of the triggers config
      * @param {Array|null} value
@@ -887,7 +917,7 @@ class Text extends Base {
      */
     beforeGetTriggers(value) {
         if (Array.isArray(value)) {
-            return [...value];
+            return [...value]
         }
 
         return value
@@ -939,10 +969,10 @@ class Text extends Base {
 
         if (me.showOptionalText && !me.required) {
             if (!hasOptionalText) {
-                value += labelOptionalText;
+                value += labelOptionalText
             }
         } else if (value && hasOptionalText) {
-            value = value.replace(labelOptionalText, '');
+            value = value.replace(labelOptionalText, '')
         }
 
         return value
@@ -971,7 +1001,7 @@ class Text extends Base {
         if (!value) {
             value = [];
         } else if (!Array.isArray(value)) {
-            value = [value];
+            value = [value]
         }
 
         let me = this;
@@ -982,15 +1012,15 @@ class Text extends Base {
                     appName: me.appName,
                     id     : me.getTriggerId(item.prototype.type),
                     field  : me
-                });
+                })
             } else if (!(item instanceof BaseTrigger)) {
                 if (!item.module && !item.ntype) {
-                    item.ntype = 'trigger';
+                    item.ntype = 'trigger'
                 }
 
                 if (item.module) {
                     item.className = item.module.prototype.className;
-                    item.id        = me.getTriggerId(item.module.prototype.type);
+                    item.id        = me.getTriggerId(item.module.prototype.type)
                 }
 
                 value[index] = Neo[item.className ? 'create' : 'ntype']({
@@ -1178,7 +1208,7 @@ class Text extends Base {
      * @returns {Boolean}
      */
     hasContent() {
-        let value = this.value;
+        let value = this.inputValue;
 
         return this.placeholderText?.length > 0 || value !== null && value.toString().length > 0
     }
@@ -1246,8 +1276,7 @@ class Text extends Base {
     }
 
     /**
-     * @param {Object} config
-     * @param {Boolean} [preventOriginalConfig] True prevents the instance from getting an originalConfig property
+     * @param args
      * @returns {Object} config
      */
     mergeConfig(...args) {
@@ -1306,7 +1335,7 @@ class Text extends Base {
             me.cls = cls;
 
             if (centerBorderEl && me.isEmpty()) {
-                delete centerBorderEl.width;
+                delete centerBorderEl.width
             }
         }
 
@@ -1320,28 +1349,30 @@ class Text extends Base {
     }
 
     /**
+     * Gets triggered by the 'input' DOM event.
      * @param {Object} data
      * @protected
      */
     onInputValueChange(data) {
-        let me       = this,
-            oldValue = me.value,
-            value    = data.value,
-            vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
+        let me         = this,
+            oldValue   = me.value,
+            inputValue = data.value,
+            vnode      = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
-            // required for validation -> revert a wrong user input
-            vnode.vnode.attributes.value = value
+            // Update the current state (modified DOM by the user) to enable the delta-updates logic.
+            // Required e.g. for validation -> revert a wrong user input
+            vnode.vnode.attributes.value = inputValue
         }
 
-        if (Neo.isString(value)) {
-            value = value.trim()
+        if (Neo.isString(inputValue)) {
+            inputValue = inputValue.trim()
         }
 
-        me.clean = false;
-        me.value = me.inputValueAdjustor(value);
+        me.clean      = false;
+        me.inputValue = me.inputValueAdjustor(inputValue); // updates this.value
 
-        me.fireUserChangeEvent(value, oldValue)
+        me.fireUserChangeEvent(me.value, oldValue)
     }
 
     /**
@@ -1391,12 +1422,12 @@ class Text extends Base {
             if (trigger.type === type) {
                 NeoArray.remove(triggers, trigger);
                 len--;
-                hasMatch = true;
+                hasMatch = true
             }
         }
 
         if (hasMatch && !silent) {
-            me.triggers = triggers;
+            me.triggers = triggers
         }
 
         return hasMatch
@@ -1412,7 +1443,7 @@ class Text extends Base {
 
         if (me.clearToOriginalValue) {
             if (value) {
-                me.originalConfig.value = value;
+                me.originalConfig.value = value
             } else {
                 value = me.originalConfig.value
             }
@@ -1460,9 +1491,9 @@ class Text extends Base {
             errorNode    = errorWrapper.cn[0];
 
             if (value) {
-                errorNode.html = value;
+                errorNode.html = value
             } else {
-                delete errorNode.html;
+                delete errorNode.html
             }
 
             errorWrapper.removeDom = !value;
@@ -1471,6 +1502,16 @@ class Text extends Base {
         }
     }
 
+    /**
+     * Override this method as needed inside class extensions.
+     * @param {*} value
+     * @returns {String}
+     * @protected
+     */
+    updateInputValueFromValue(value) {
+        return value
+    }
+
     /**
      * Calculates the new inputWidth based on the labelWidth & total width
      * @protected
@@ -1494,7 +1535,7 @@ class Text extends Base {
     updateReadOnlyState() {
         let me = this;
 
-        me.changeInputElKey('readonly', !me.editable || me.readOnly || null);
+        me.changeInputElKey('readonly', !me.editable || me.readOnly || null)
     }
 
     /**
@@ -1518,6 +1559,16 @@ class Text extends Base {
         })
     }
 
+    /**
+     * Override this method as needed inside class extensions.
+     * @param {String} inputValue
+     * @returns {*}
+     * @protected
+     */
+    updateValueFromInputValue(inputValue) {
+        return inputValue
+    }
+
     /**
      * Checks for client-side field errors
      * @param {Boolean} silent=true
@@ -1538,36 +1589,36 @@ class Text extends Base {
 
         if (!silent) {
             // in case we manually call validate(false) on a form or field before it is mounted, we do want to see errors.
-            me.clean = false;
+            me.clean = false
         }
 
         if (isEmpty) {
             if (required) {
                 me._error   = me.errorTextRequired;
-                returnValue = false;
+                returnValue = false
             }
         } else {
             if (Neo.isNumber(maxLength) && valueLength > maxLength) {
                 me._error   = me.errorTextMaxLength(errorParam);
-                returnValue = false;
+                returnValue = false
             } else if (Neo.isNumber(minLength) && valueLength < minLength) {
                 me._error   = me.errorTextMinLength(errorParam);
-                returnValue = false;
+                returnValue = false
             } else if (inputPattern && !inputPattern.test(value)) {
                 me._error   = me.errorTextInputPattern(errorParam);
-                returnValue = false;
+                returnValue = false
             } else if (Neo.isFunction(me.validator)) {
                 errorText = me.validator(me);
 
                 if (errorText !== true) {
                     me._error   = errorText;
-                    returnValue = false;
+                    returnValue = false
                 }
             }
         }
 
         if (returnValue) {
-            me._error = null;
+            me._error = null
         }
 
         !me.clean && me.updateError(me._error, silent);
@@ -1576,6 +1627,6 @@ class Text extends Base {
     }
 }
 
-Neo.applyClassConfig(Text);
+Neo.setupClass(Text);
 
 export default Text;

package/src/form/field/TextArea.mjs

@@ -216,6 +216,6 @@ class TextArea extends Text {
     }
 }
 
-Neo.applyClassConfig(TextArea);
+Neo.setupClass(TextArea);
 
 export default TextArea;

package/src/form/field/Time.mjs

@@ -419,6 +419,6 @@ class Time extends Picker {
     }
 }
 
-Neo.applyClassConfig(Time);
+Neo.setupClass(Time);
 
 export default Time;

package/src/form/field/Url.mjs

@@ -38,6 +38,6 @@ class Url extends Text {
     }
 }
 
-Neo.applyClassConfig(Url);
+Neo.setupClass(Url);
 
 export default Url;

package/src/form/field/ZipCode.mjs

@@ -112,6 +112,6 @@ class ZipCode extends Text {
     }
 }
 
-Neo.applyClassConfig(ZipCode);
+Neo.setupClass(ZipCode);
 
 export default ZipCode;