neo.mjs 6.13.0 → 6.15.0

package/src/form/field/{Select.mjs → ComboBox.mjs}

@@ -10,10 +10,10 @@ import VDomUtil         from '../../util/VDom.mjs';
  * Provides a dropdown list to select one or multiple items.
  *
  * Conforms to ARIA accessibility standards outlines in https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
- * @class Neo.form.field.Select
+ * @class Neo.form.field.ComboBox
  * @extends Neo.form.field.Picker
  */
-class Select extends Picker {
+class ComboBox extends Picker {
     /**
      * Valid values for triggerAction
      * @member {String[]} triggerActions=['all','filtered']
@@ -24,23 +24,23 @@ class Select extends Picker {
 
     static config = {
         /**
-         * @member {String} className='Neo.form.field.Select'
+         * @member {String} className='Neo.form.field.ComboBox'
          * @protected
          */
-        className: 'Neo.form.field.Select',
+        className: 'Neo.form.field.ComboBox',
         /**
-         * @member {String} ntype='selectfield'
+         * @member {String} ntype='combobox'
          * @protected
          */
-        ntype: 'selectfield',
+        ntype: 'combobox',
         /**
          * @member {String|Number|null} activeRecordId=null
          */
         activeRecordId: null,
         /**
-         * @member {String[]} baseCls=['neo-selectfield','neo-pickerfield','neo-textfield']
+         * @member {String[]} baseCls=['neo-combobox','neo-pickerfield','neo-textfield']
          */
-        baseCls: ['neo-selectfield', 'neo-pickerfield', 'neo-textfield'],
+        baseCls: ['neo-combobox', 'neo-pickerfield', 'neo-textfield'],
         /**
          * @member {String} displayField='name'
          */
@@ -88,11 +88,6 @@ class Select extends Picker {
          * @member {Number|null} pickerHeight=null
          */
         pickerHeight: null,
-        /**
-         * @member {Object} record_=null
-         * @protected
-         */
-        record_: null,
         /**
          * @member {String|null} role='combobox'
          */
@@ -126,6 +121,17 @@ class Select extends Picker {
         valueField: 'id'
     }
 
+    /**
+     * Internal flag to store the value, in case it was set before the store was loaded
+     * @member {Number|String} preStoreLoadValue=null
+     */
+    preStoreLoadValue = null
+    /**
+     * Internal flag to not show a picker when non user-based input value changes happen
+     * @member {Boolean} programmaticValueChange=false
+     */
+    programmaticValueChange = false
+
     /**
      * @param {Object} config
      */
@@ -135,28 +141,20 @@ class Select extends Picker {
         let me = this;
 
         // Create buffered function to respond to input field mutation
-        me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
+        //me.filterOnInput = buffer(me.filterOnInput, me, me.filterDelay);
 
         me.typeAhead && me.updateTypeAhead()
     }
 
     /**
-     * Triggered after the record config got changed
-     * @param {Object} value
-     * @param {Object} oldValue
+     * Triggered after the inputValue config got changed
+     * @param {String|null} value
+     * @param {String|null} oldValue
      * @protected
      */
-    afterSetRecord(value, oldValue) {
-        if (this._picker?.isVisible) {
-            let selectionModel = this.list?.selectionModel;
-
-            if (value) {
-                oldValue && selectionModel?.deselect(oldValue);
-                selectionModel?.select(value)
-            } else {
-                selectionModel.deselectAll()
-            }
-        }
+    afterSetInputValue(value, oldValue) {
+        super.afterSetInputValue(value, oldValue);
+        this.updateTypeAheadValue(value);
     }
 
     /**
@@ -177,7 +175,7 @@ class Select extends Picker {
                     includeEmptyValues: true,
                     operator          : me.filterOperator,
                     property          : me.displayField,
-                    value             : value.get(me.value)?.[me.displayField] || me.value
+                    value             : value?.[me.displayField] || null
                 });
 
                 value.filters = filters
@@ -201,6 +199,31 @@ class Select extends Picker {
         this.rendered && this.updateTypeAhead()
     }
 
+    /**
+     * Triggered after the value config got changed
+     * @param {Object} value
+     * @param {Object} oldValue
+     * @protected
+     */
+    afterSetValue(value, oldValue) {
+        super.afterSetValue(value, oldValue);
+
+        let me = this;
+
+        me.programmaticValueChange = false;
+
+        if (me._picker?.isVisible) {
+            let selectionModel = me.list?.selectionModel;
+
+            if (value) {
+                oldValue && selectionModel?.deselect(oldValue);
+                selectionModel?.select(value)
+            } else {
+                selectionModel.deselectAll()
+            }
+        }
+    }
+
     /**
      * Triggered before the listConfig config gets changed.
      * @param {Object} value
@@ -234,13 +257,14 @@ class Select extends Picker {
                     // Simplest case is just picking string values.
                     if (typeof v === 'string') {
                         v = {
-                            [valueField]   : v,
-                            [displayField] : v
-                        };
+                            [valueField]  : v,
+                            [displayField]: v
+                        }
                     }
-                    return v;
+
+                    return v
                 })
-            };
+            }
         }
 
         // to reduce boilerplate code, a store config object without a defined model should default
@@ -269,9 +293,9 @@ class Select extends Picker {
 
     /**
      * Triggered before the value config gets changed.
-     * @param {Number|String|null} value
-     * @param {Number|String|null} oldValue
-     * @returns {Number|String|null}
+     * @param {Number|Object|String} value
+     * @param {Number|Object|String} oldValue
+     * @returns {Number|Object|String}
      * @protected
      */
     beforeSetValue(value, oldValue) {
@@ -280,21 +304,31 @@ class Select extends Picker {
             store        = me.store,
             record;
 
+        me.programmaticValueChange = true;
+
+        // getting a record, nothing to do
         if (Neo.isObject(value)) {
-            me.record = value;
-            return value[displayField];
-        } else {
+            return value
+        }
+
+        if (value === null) {
+            return null
+        }
+
+        // we can only match record ids or display values in case the store is loaded
+        if (store.getCount() > 0) {
             record = store.isFiltered() ? store.allItems.get(value) : store.get(value);
 
             if (record) {
-                me.record = record;
-                return record[displayField];
+                return record
             }
-        }
-
-        me.record = store.find(displayField, value)[0] || null;
 
-        return value
+            return store.find(displayField, value)[0] || null
+        } else {
+            // store not loaded yet
+            me.preStoreLoadValue = value;
+            return null
+        }
     }
 
     /**
@@ -332,7 +366,7 @@ class Select extends Picker {
             scope          : me
         });
 
-        return me.list;
+        return me.list
     }
 
     /**
@@ -349,10 +383,8 @@ class Select extends Picker {
         let me     = this,
             store  = me.store,
             filter = store.getFilter(me.displayField),
-            {
-                picker,
-                record
-            }      = me;
+            picker = me.picker,
+            record = me.value;
 
         if (filter) {
             filter.value = value
@@ -387,11 +419,11 @@ class Select extends Picker {
     }
 
     /**
-     * @param {Object} data
+     * @param {String} value
      */
-    filterOnInput(data) {
-        if (data.value) {
-            this.doFilter(data.value)
+    filterOnInput(value) {
+        if (value) {
+            this.doFilter(value)
         } else {
             this.picker?.hide()
         }
@@ -406,19 +438,10 @@ class Select extends Picker {
     fireChangeEvent(value, oldValue) {
         let me            = this,
             FormContainer = Neo.form?.Container,
-            record        = me.record,
-            oldRecord, params;
+            params;
 
-        if (!(me.forceSelection && !record)) {
-            oldRecord = me.store.get(oldValue) || null;
-
-            params = {
-                component: me,
-                oldRecord,
-                oldValue,
-                record,
-                value
-            };
+        if (!(me.forceSelection && !value)) {
+            params = {component: me, oldValue, value};
 
             me.fire('change', params);
 
@@ -463,7 +486,7 @@ class Select extends Picker {
     getValue() {
         let me = this;
 
-        return me.record?.[me.valueField] || me.value
+        return me.value?.[me.valueField] || me.emptyValue
     }
 
     /**
@@ -487,24 +510,15 @@ class Select extends Picker {
     onFocusLeave(data) {
         let me = this;
 
-        console.log(me.forceSelection, me.record, me.activeRecordId);
-
-        if (me.forceSelection && !me.record) {
-            me.value = me.store.get(me.activeRecordId)
+        if (me.forceSelection && !me.value) {
+            me.programmaticValueChange = true;
+            me.value                   = me.store.get(me.activeRecordId);
+            me.programmaticValueChange = false;
         }
 
-        super.onFocusLeave(data)
-    }
+        me.updateTypeAheadValue(null);
 
-    /**
-     * @param {Object} data
-     * @protected
-     */
-    onInputValueChange(data) {
-        // We do not call super here. The value of the Select is *not* connected to the value
-        // typed into the input area. The input area is just a filter value to filter the list.
-        this.lastManualInput = data.value
-        this.filterOnInput(data);
+        super.onFocusLeave(data)
     }
 
     /**
@@ -530,27 +544,30 @@ class Select extends Picker {
      * @param {Object[]} selectionChangeEvent.selection
      * @protected
      */
-    onListItemSelectionChange({ selection }) {
+    async onListItemSelectionChange({ selection }) {
         if (selection?.length) {
             const
-                me           = this,
-                oldValue     = me.value,
-                selected     = selection[0],
-                record       = typeof selected === 'string' ? me.store.get(me.list.getItemRecordId(selected)) : selected,
-                value        = record[me.displayField];
+                me       = this,
+                selected = selection[0],
+                record   = typeof selected === 'string' ? me.store.get(me.list.getItemRecordId(selected)) : selected;
 
-            me.hidePicker();
             me.hintRecordId = null;
-            me.record       = record;
-            me._value       = value;
-            me.getInputHintEl().value = null;
 
-            me.afterSetValue(value, oldValue, true); // prevent the list from getting filtered
+            me.updateTypeAheadValue(null, true);
+
+            me.preventFiltering = true;
+            me.value            = record;
+            me.preventFiltering = false;
 
             me.fire('select', {
-                record,
-                value
-            })
+                value: record
+            });
+
+            // Short delay to let selection DOM updates get applied.
+            // Alternatively, we could hide the picker before the selection happen and limit updates to the vdom.
+            await me.timeout(20);
+
+            await me.hidePicker()
         }
     }
 
@@ -559,14 +576,16 @@ class Select extends Picker {
      * For example clicking on already selected list item.
      */
     onListItemSelectionNoChange() {
-        this.hidePicker();
+        this.hidePicker()
     }
 
     /**
      * @param {Object} record
      * @protected
      */
-    onListItemNavigate({ activeItem, activeIndex }) {
+    onListItemNavigate(record) {
+        let {activeItem, activeIndex} = record;
+
         if (activeIndex >= 0) {
             const
                 me        = this,
@@ -587,11 +606,13 @@ class Select extends Picker {
         const inputEl = this.getInputEl();
 
         super.onPickerHiddenChange(...arguments);
+
         if (value) {
-            inputEl['aria-activedescendant'] = '';
+            inputEl['aria-activedescendant'] = ''
         }
+
         inputEl['aria-expanded'] = !value;
-        this.update();
+        this.update()
     }
 
     /**
@@ -602,8 +623,7 @@ class Select extends Picker {
 
         if (me.picker?.isVisible) {
             me.picker.hidden = true
-        }
-        else if (!me.readOnly && !me.disabled) {
+        } else if (!me.disabled && !me.readOnly) {
             me.doFilter(null)
         }
     }
@@ -614,10 +634,10 @@ class Select extends Picker {
      */
     onStoreLoad(items) {
         let me    = this,
-            value = me.value;
+            value = me.preStoreLoadValue;
 
-        if (value) {
-            me._value = null; // silent update
+        if (value !== null) {
+            me._value = undefined; // silent update
             me.value  = value
         }
     }
@@ -645,13 +665,28 @@ class Select extends Picker {
 
         if (!Neo.isNumber(index)) {
             if (me.activeRecordId) {
-                index = me.store.indexOfKey(me.activeRecordId);
+                index = me.store.indexOfKey(me.activeRecordId)
             } else {
-                index = 0;
+                index = 0
             }
         }
 
-        me.list.selectItem(index);
+        me.list.selectItem(index)
+    }
+
+    /**
+     * Override this method as needed inside class extensions.
+     * @param {*} value
+     * @protected
+     */
+    updateInputValueFromValue(value) {
+        let inputValue = null;
+
+        if (Neo.isObject(value)) {
+            inputValue = value[this.displayField]
+        }
+
+        this.inputValue = inputValue
     }
 
     /**
@@ -690,31 +725,45 @@ class Select extends Picker {
      * @protected
      */
     updateTypeAheadValue(value=this.lastManualInput, silent=false) {
-        let me          = this,
-            match       = false,
-            {
-                store,
-                displayField
-            }
-                        = me,
-            inputHintEl = me.getInputHintEl();
+        let me                    = this,
+            match                 = false,
+            inputHintEl           = me.getInputHintEl(),
+            {displayField, store} = me;
 
-        if (!me.record && value?.length > 0) {
-            const search = value.toLocaleLowerCase();
-            match = store.items.find(r => r[displayField]?.toLowerCase?.()?.startsWith(search));
+        if (me.typeAhead) {
+            if (!me.value && value?.length > 0) {
+                const search = value.toLocaleLowerCase();
+                match = store.items.find(r => r[displayField]?.toLowerCase?.()?.startsWith(search));
+
+                if (match && inputHintEl) {
+                    inputHintEl.value = value + match[displayField].substr(value.length);
+                    me.activeRecord   = match;
+                    me.activeRecordId = match[store.keyProperty || store.model.keyProperty]
+                }
+            }
 
-            if (match && inputHintEl) {
-                inputHintEl.value = value + match[displayField].substr(value.length);
-                me.activeRecord = match;
-                me.activeRecordId = match[store.keyProperty || store.model.keyProperty]
+            if (!match && inputHintEl) {
+                inputHintEl.value = me.activeRecord = me.activeRecordId = null;
             }
-        }
 
-        if (!match && inputHintEl) {
-            inputHintEl.value = me.activeRecord = me.activeRecordId = null;
+            !silent && me.update()
         }
+    }
+    /**
+     * @param {String} inputValue
+     * @protected
+     */
+    updateValueFromInputValue(inputValue) {
+        let me = this;
 
-        !silent && me.update()
+        me.lastManualInput = inputValue;
+
+        if (!me.programmaticValueChange) {
+            // changing the input => silent record reset
+            me._value = null;
+
+            me.filterOnInput(inputValue)
+        }
     }
 }
 
@@ -726,6 +775,6 @@ class Select extends Picker {
  * @returns {Object}
  */
 
-Neo.setupClass(Select);
+Neo.setupClass(ComboBox);
 
-export default Select;
+export default ComboBox;

package/src/form/field/Country.mjs

@@ -1,10 +1,10 @@
-import Select from '../../form/field/Select.mjs';
+import ComboBox from './ComboBox.mjs';
 
 /**
  * @class Neo.form.field.Country
- * @extends Neo.form.field.Select
+ * @extends Neo.form.field.ComboBox
  */
-class Country extends Select {
+class Country extends ComboBox {
     static config = {
         /**
          * @member {String} className='Neo.form.field.Country'

package/src/form/field/Text.mjs

@@ -496,7 +496,7 @@ class Text extends Base {
         NeoArray.toggle(cls, 'neo-has-content', me.hasContent());
         me.cls = cls;
 
-        me.value = me.updateValueFromInputValue(value)
+        me.updateValueFromInputValue(value)
     }
 
     /**
@@ -866,18 +866,17 @@ class Text extends Base {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let me            = this,
-            originalValue = me.originalConfig.value,
-            isDirty       = value !== originalValue && Neo.isEmpty(value) !== Neo.isEmpty(originalValue),
+        let me = this,
             cls;
 
         me.silentVdomUpdate = true;
-        me.inputValue       = me.updateInputValueFromValue(value);
+
+        me.updateInputValueFromValue(value);
 
         me.validate(); // silent
 
         cls = me.cls;
-        NeoArray.toggle(cls, 'neo-is-dirty', isDirty);
+        NeoArray.toggle(cls, 'neo-is-dirty', me.isDirty);
         me.cls = cls;
 
         me.silentVdomUpdate = false;
@@ -1505,11 +1504,10 @@ class Text extends Base {
     /**
      * Override this method as needed inside class extensions.
      * @param {*} value
-     * @returns {String}
      * @protected
      */
     updateInputValueFromValue(value) {
-        return value
+        this.inputValue = value
     }
 
     /**
@@ -1562,11 +1560,10 @@ class Text extends Base {
     /**
      * Override this method as needed inside class extensions.
      * @param {String} inputValue
-     * @returns {*}
      * @protected
      */
     updateValueFromInputValue(inputValue) {
-        return inputValue
+        this.value = inputValue
     }
 
     /**

package/src/form/field/_export.mjs

@@ -1,6 +1,7 @@
 import Base     from './Base.mjs';
 import CheckBox from './CheckBox.mjs';
 import Chip     from './Chip.mjs';
+import ComboBox from './ComboBox.mjs';
 import Date     from './Date.mjs';
 import Display  from './Display.mjs';
 import Email    from './Email.mjs';
@@ -10,10 +11,9 @@ import Picker   from './Picker.mjs';
 import Radio    from './Radio.mjs';
 import Range    from './Range.mjs';
 import Search   from './Search.mjs';
-import Select   from './Select.mjs';
 import Text     from './Text.mjs';
 import TextArea from './TextArea.mjs';
 import Time     from './Time.mjs';
 import Url      from './Url.mjs';
 
-export {Base, CheckBox, Chip, Date, Display, Email, Number, Password, Picker, Radio, Range, Search, Select, Text, TextArea, Time, Url};
+export {Base, CheckBox, Chip, ComboBox, Date, Display, Email, Number, Password, Picker, Radio, Range, Search, Text, TextArea, Time, Url};

package/src/main/DomEvents.mjs

@@ -513,7 +513,8 @@ class DomEvents extends Base {
             data  : {
                 appNames: manager.appNames,
                 hash    : this.parseHash(hashString),
-                hashString
+                hashString,
+                windowId: manager.windowId
             }
         })
     }

package/src/main/addon/MonacoEditor.mjs

@@ -17,9 +17,9 @@ class MonacoEditor extends Base {
          */
         className: 'Neo.main.addon.MonacoEditor',
         /**
-         * @member {String} libraryBasePath='../../../../node_modules/monaco-editor/min/vs'
+         * @member {String} libraryBasePath='../../node_modules/monaco-editor/min/vs'
          */
-        libraryBasePath: '../../../../node_modules/monaco-editor/min/vs',
+        libraryBasePath: '../../node_modules/monaco-editor/min/vs',
         /**
          * Remote method access for other workers
          * @member {Object} remote