neo.mjs 6.12.1 → 6.14.0

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
@@ -87,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'
          */
@@ -125,36 +121,40 @@ 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
      */
     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()
     }
 
     /**
-     * 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 me             = this,
-                selectionModel = me.list?.selectionModel;
-
-            if (value) {
-                selectionModel?.select(value);
-            }
-            else {
-                selectionModel.deselectAll();
-            }
-        }
+    afterSetInputValue(value, oldValue) {
+        super.afterSetInputValue(value, oldValue);
+        this.updateTypeAheadValue(value);
     }
 
     /**
@@ -175,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
@@ -199,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,11 +259,12 @@ class Select extends Picker {
                         v = {
                             [valueField]   : v,
                             [displayField] : v
-                        };
+                        }
                     }
-                    return v;
+
+                    return v
                 })
-            };
+            }
         }
 
         // to reduce boilerplate code, a store config object without a defined model should default
@@ -267,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) {
@@ -278,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;
+        }
     }
 
     /**
@@ -302,15 +338,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 +355,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 +381,17 @@ class Select extends Picker {
      */
     doFilter(value) {
         let me     = this,
-            filter = me.store.getFilter(me.displayField),
-            {
-                record,
-                picker
-            }      = me;
+            store  = me.store,
+            filter = store.getFilter(me.displayField),
+            picker = me.picker,
+            record = me.value;
 
         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,27 +404,28 @@ 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()
         }
     }
 
     /**
-     * @param {Object} data
+     * @param {String} value
      */
-    filterOnInput(data) {
-        if (data.value) {
-            this.doFilter(data.value);
-        }
-        else if (this.picker) {
-            this.picker?.hide();
+    filterOnInput(value) {
+        if (value) {
+            this.doFilter(value)
+        } else {
+            this.picker?.hide()
         }
     }
 
@@ -401,19 +438,10 @@ class Select extends Picker {
     fireChangeEvent(value, oldValue) {
         let me            = this,
             FormContainer = Neo.form?.Container,
-            record        = me.record,
-            oldRecord, params;
-
-        if (!(me.forceSelection && !record)) {
-            oldRecord = me.store.get(oldValue) || null;
+            params;
 
-            params = {
-                component: me,
-                oldRecord,
-                oldValue,
-                record,
-                value
-            };
+        if (!(me.forceSelection && !value)) {
+            params = {component: me, oldValue, value};
 
             me.fire('change', params);
 
@@ -458,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
     }
 
     /**
@@ -482,45 +510,26 @@ 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 = '';
-            }
+        if (me.forceSelection && !me.value) {
+            me.programmaticValueChange = true;
+            me.value                   = me.store.get(me.activeRecordId);
+            me.programmaticValueChange = false;
         }
 
-        // 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;
-        }
+        me.updateTypeAheadValue(null);
 
         super.onFocusLeave(data)
     }
 
-    /**
-     * @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);
-    }
-
     /**
      * @param {Object} data
      * @protected
      */
     onKeyDownDown(data) {
-        if (!this.picker || this.picker?.hidden) {
-            this.onPickerTriggerClick();
+        let me = this;
+
+        if (!me.picker || me.picker?.hidden) {
+            me.onPickerTriggerClick()
         }
     }
 
@@ -535,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()
         }
     }
 
@@ -564,21 +576,23 @@ 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,
                 { 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();
@@ -592,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()
     }
 
     /**
@@ -606,9 +622,8 @@ class Select extends Picker {
         let me = this;
 
         if (me.picker?.isVisible) {
-            me.picker.hidden = true;
-        }
-        else if (!me.readOnly && !me.disabled) {
+            me.picker.hidden = true
+        } else if (!me.disabled && !me.readOnly) {
             me.doFilter(null)
         }
     }
@@ -619,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
         }
     }
@@ -650,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,36 +720,50 @@ 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) {
-        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)
+        }
     }
 }
 
@@ -731,6 +775,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;