neo.mjs 6.12.0 → 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
  */
@@ -32,6 +33,10 @@ class Select extends Picker {
          * @protected
          */
         ntype: 'selectfield',
+        /**
+         * @member {String|Number|null} activeRecordId=null
+         */
+        activeRecordId: null,
         /**
          * @member {String[]} baseCls=['neo-selectfield','neo-pickerfield','neo-textfield']
          */
@@ -40,6 +45,12 @@ class Select extends Picker {
          * @member {String} displayField='name'
          */
         displayField: 'name',
+        /**
+         * The millisecond time to delay between input field mutation and applying the input field's
+         * new value to the filter
+         * @member {Number} filterDelay=300
+         */
+        filterDelay : 300,
         /**
          * @member {String} filterOperator_='like'
          */
@@ -47,13 +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,
-        /**
-         * @member {String|Number|null} activeRecordId=null
-         */
-        activeRecordId: null,
+        forceSelection: true,
         /**
          * Additional used keys for the selection model
          * @member {Object} keys
@@ -116,13 +123,7 @@ class Select extends Picker {
          * which you want to submit instead
          * @member {Number|String} valueField='id'
          */
-        valueField: 'id',
-        /**
-         * The millisecond time to delay between input field mutation and applying the input field's
-         * new value to the filter
-         * @member {Number} filterDelay=300
-         */
-        filterDelay : 300
+        valueField: 'id'
     }
 
     /**
@@ -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()
     }
 
     /**
@@ -143,16 +146,15 @@ class Select extends Picker {
      * @param {Object} oldValue
      * @protected
      */
-    afterSetRecord(value) {
+    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()
             }
         }
     }
@@ -252,7 +254,7 @@ class Select extends Picker {
             }
         }
 
-        return ClassSystemUtil.beforeSetInstance(value, Store);
+        return ClassSystemUtil.beforeSetInstance(value, Store)
     }
 
     /**
@@ -302,36 +304,99 @@ class Select extends Picker {
         const me = this;
 
         me.list = Neo.create({
-            module          : List,
-            appName         : me.appName,
-            displayField    : me.displayField,
-            role            : 'listbox',
-            itemRole        : 'option',
-            parentId        : me.id,
-            navigator       : {
-                eventSource : me.getInputElId()
-            },
-            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
         });
+
         me.getInputEl()['aria-controls'] = me.list.id;
 
         me.list.addDomListeners({
             neonavigate: {
-                fn    : me.onListItemNavigate,
-                scope : me
+                fn   : me.onListItemNavigate,
+                scope: me
             }
         });
+
         me.list.selectionModel.on({
-            selectionChange : me.onListItemSelectionChange,
-            noChange        : me.onListItemSelectionNoChange,
-            scope           : me
-        })
+            noChange       : me.onListItemSelectionNoChange,
+            selectionChange: me.onListItemSelectionChange,
+            scope          : me
+        });
 
         return me.list;
     }
 
+    /**
+     * All routes which expect to open the picker route through here. This updates the
+     * filter and ensures that the picker is visible and reflecting the state of the filter.
+     *
+     * Input event processing passes the current input field value in as the filter value.
+     *
+     * Invocation of the expand trigger passes `null` so as to clear filtering.
+     * @private
+     * @param {String|null} value The value to filter the picker by
+     */
+    doFilter(value) {
+        let me     = this,
+            store  = me.store,
+            filter = store.getFilter(me.displayField),
+            {
+                picker,
+                record
+            }      = me;
+
+        if (filter) {
+            filter.value = value
+        }
+
+        // Filter resulting in something to show
+        if (store.getCount()) {
+            me.getPicker().hidden = false;
+
+            // List might not exist until the picker is created
+            const
+                { list }           = me,
+                { selectionModel } = list;
+
+            // On show, set the active item to be the current selected record or the first
+            if (record) {
+                // We do not want to hear back about our own selection
+                selectionModel.suspendEvents = true;
+                selectionModel.select(record);
+                selectionModel.suspendEvents = false
+            }
+            setTimeout(() => {
+                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 {
+            picker?.hide()
+        }
+    }
+
+    /**
+     * @param {Object} data
+     */
+    filterOnInput(data) {
+        if (data.value) {
+            this.doFilter(data.value)
+        } else {
+            this.picker?.hide()
+        }
+    }
+
     /**
      * Overrides form.field.Base
      * @param {*} value
@@ -383,7 +448,7 @@ class Select extends Picker {
 
     /**
      * Returns the first selected record or null
-     * returns {Object}
+     * @returns {Object}
      */
     getRecord() {
         let list      = this.list,
@@ -401,13 +466,17 @@ class Select extends Picker {
         return me.record?.[me.valueField] || me.value
     }
 
+    /**
+     *
+     */
     onConstructed() {
         const inputEl = this.getInputEl();
 
-        inputEl['aria-expanded'] = false
-        inputEl['aria-haspopup'] = 'listbox'
-        inputEl['aria-activedescendant'] = ''
-        super.onConstructed(...arguments);
+        inputEl['aria-activedescendant'] = '';
+        inputEl['aria-expanded']         = false;
+        inputEl['aria-haspopup']         = 'listbox';
+
+        super.onConstructed(...arguments)
     }
 
     /**
@@ -418,36 +487,15 @@ 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 = '';
-            }
-        }
-
-        // Clear any typeahead hint
-        me.updateTypeAheadValue('');
+        console.log(me.forceSelection, me.record, me.activeRecordId);
 
-        // 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)
     }
 
-    filterOnInput(data) {
-        if (data.value) {
-            this.doFilter(data.value);
-        }
-        else if (this.picker) {
-            this.picker?.hide();
-        }
-    }
-
     /**
      * @param {Object} data
      * @protected
@@ -464,20 +512,11 @@ class Select extends Picker {
      * @protected
      */
     onKeyDownDown(data) {
-        if (!this.picker || this.picker?.hidden) {
-            this.onPickerTriggerClick();
-        }
-    }
-
-    onPickerHiddenChange({ value }) {
-        const inputEl = this.getInputEl();
+        let me = this;
 
-        super.onPickerHiddenChange(...arguments);
-        if (value) {
-            inputEl['aria-activedescendant'] = '';
+        if (!me.picker || me.picker?.hidden) {
+            me.onPickerTriggerClick()
         }
-        inputEl['aria-expanded'] = !value;
-        this.update();
     }
 
     // TODO:
@@ -533,14 +572,42 @@ 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();
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onPickerHiddenChange({ value }) {
+        const inputEl = this.getInputEl();
+
+        super.onPickerHiddenChange(...arguments);
+        if (value) {
+            inputEl['aria-activedescendant'] = '';
+        }
+        inputEl['aria-expanded'] = !value;
+        this.update();
+    }
+
+    /**
+     *
+     */
+    onPickerTriggerClick() {
+        let me = this;
+
+        if (me.picker?.isVisible) {
+            me.picker.hidden = true
+        }
+        else if (!me.readOnly && !me.disabled) {
+            me.doFilter(null)
+        }
+    }
+
     /**
      * Selecting a record, if required
      * @param {Object[]} items
@@ -587,65 +654,6 @@ class Select extends Picker {
         me.list.selectItem(index);
     }
 
-    onPickerTriggerClick() {
-        let me = this;
-
-        if (me.picker?.isVisible) {
-            me.picker.hidden = true;
-        }
-        else if (!me.readOnly && !me.disabled) {
-            me.doFilter(null)
-        }
-    }
-
-    /**
-     * All routes which expect to open the picker route through here. This updates the
-     * filter and ensures that the picker is visible and reflecting the state of the filter.
-     *
-     * Input event processing passes the current input field value in as the filter value.
-     *
-     * Invocation of the expand trigger passes `null` so as to clear filtering.
-     * @private
-     * @param {String}null} value The value to filter the picker by
-     */
-    doFilter(value) {
-        let me     = this,
-            filter = me.store.getFilter(me.displayField),
-            {
-                record,
-                picker
-            }      = me;
-
-        if (filter) {
-            filter.value = value;
-        }
-
-        // Filter resulting in something to show
-        if (me.store.getCount()) {
-            me.getPicker().hidden = false;
-
-            // List might not exist until the picker is created
-            const
-                { list }           = me,
-                { selectionModel } = list;
-
-            // On show, set the active item to be the current selected record or the first
-            if (record) {
-                // We do not want to hear back about our own selection
-                selectionModel.suspendEvents = true;
-                selectionModel.select(record);
-                selectionModel.suspendEvents = false;
-            }
-            setTimeout(() => {
-                list.activeIndex = me.record || 0;
-            }, 100)
-        }
-        // Filtered down to nothing - hide picker if it has been created.
-        else if (picker) {
-            picker._hidden = true;
-        }
-    }
-
     /**
      * @param {Boolean} [silent=false]
      * @protected
@@ -677,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) {
@@ -718,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;