neo.mjs 4.4.17 → 4.4.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "4.4.17",
+    "version": "4.4.19",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/scss/src/form/field/Picker.scss

@@ -1,13 +1,15 @@
 .neo-pickerfield {
-    .neo-picker-container {
-        background-color: v(pickerfield-container-background-color);
-        border          : v(pickerfield-container-border);
-        box-shadow      : v(pickerfield-container-box-shadow);
-        position        : fixed;
-        z-index         : 20;
 
-        &:focus {
-            outline: none;
-        }
+}
+
+.neo-picker-container {
+    background-color: v(pickerfield-container-background-color);
+    border          : v(pickerfield-container-border);
+    box-shadow      : v(pickerfield-container-box-shadow);
+    position        : absolute;
+    z-index         : 200;
+
+    &:focus {
+        outline: none;
     }
-}
+}

package/src/form/field/Picker.mjs

@@ -89,8 +89,8 @@ class Picker extends Text {
     applyClientRects(silent) {
         let me          = this,
             rects       = me.clientRects,
-            bodyRect    = rects[2],
             inputRect   = rects[1],
+            parentRect  = rects[2],
             triggerRect = rects[0],
             vdom        = me.picker.vdom,
             width       = me.matchPickerWidth ? inputRect.width : me.pickerWidth;
@@ -100,6 +100,7 @@ class Picker extends Text {
         vdom.style = vdom.style || {};
 
         Object.assign(vdom.style, {
+            left : `${inputRect.left}px`,
             top  : `${inputRect.bottom + 1}px`,
             width: `${width}px`
         });
@@ -123,7 +124,25 @@ class Picker extends Text {
             maxHeight: me.pickerMaxHeight,
             vdom     : {cn: [], tabIndex: -1},
             width    : me.pickerWidth,
-            ...me.pickerConfig
+            ...me.pickerConfig,
+
+            // scoped to the field instance
+            onFocusLeave: data => {
+                let insideField = false,
+                    item;
+
+                for (item of data.oldPath) {
+                    if (item.id === me.id) {
+                        insideField = true;
+                        break;
+                    }
+                }
+
+                if (!insideField) {
+                    me.hidePicker();
+                    super.onFocusLeave(data);
+                }
+            }
         });
     }
 
@@ -137,13 +156,13 @@ class Picker extends Text {
 
     /**
      * @param {Function} [callback]
-     * @param {Function} [callbackScope]
+     * @param {Object} [callbackScope]
      */
     getClientRectsThenShow(callback, callbackScope) {
         let me        = this,
             triggerId = me.getTriggerId('picker');
 
-        me.getDomRect([triggerId, me.getInputWrapperId(), 'body']).then(data => {
+        me.getDomRect([triggerId, me.getInputWrapperId(), me.parentId]).then(data => {
             me.clientRects = data;
             me.showPicker(callback, callbackScope);
         });
@@ -171,24 +190,18 @@ class Picker extends Text {
     }
 
     /**
-     * @param {Boolean} [silent=false]
+     *
      */
-    hidePicker(silent=false) {
+    async hidePicker() {
         let me     = this,
-            picker = me.getPicker(),
-            vdom   = me.vdom;
+            picker = me.getPicker();
 
-        me.pickerIsMounted && VDomUtil.removeVdomChild(vdom, me.getPickerId());
+        // avoid breaking selection model cls updates
+        await Neo.timeout(30);
 
-        me.pickerIsMounted = false;
+        me.pickerIsMounted && picker.unmount();
 
-        if (silent) {
-            picker.mounted = false;
-        } else {
-            me.promiseVdomUpdate().then(data => {
-                picker.mounted = me.pickerIsMounted;
-            });
-        }
+        me.pickerIsMounted = false;
     }
 
     /**
@@ -196,22 +209,27 @@ class Picker extends Text {
      * @protected
      */
     onFocusLeave(data) {
-        let me = this;
+        let me           = this,
+            insidePicker = false,
+            item;
+
+        for (item of data.oldPath) {
+            if (item.id === me.getPickerId()) {
+                insidePicker = true;
+                break;
+            }
+        }
 
-        // inline will trigger an vdom update, so hide picker should be silent
-        if (me.labelPosition === 'inline' && (me.value === '' || me.value === null)) {
-            me.hidePicker(true);
-        } else {
+        if (!insidePicker) {
             me.hidePicker();
+            super.onFocusLeave(data);
         }
-
-        super.onFocusLeave(data);
     }
 
     /**
      * @param {Object} data
      * @param {Function} [callback]
-     * @param {Function} [callbackScope]
+     * @param {Object} [callbackScope]
      * @protected
      */
     onKeyDownEnter(data, callback, callbackScope) {
@@ -242,23 +260,23 @@ class Picker extends Text {
 
     /**
      * @param {Function} [callback]
-     * @param {Function} [callbackScope]
+     * @param {Object} [callbackScope]
      */
     showPicker(callback, callbackScope) {
         let me     = this,
             picker = me.getPicker(),
-            vdom   = me.vdom;
+            listenerId;
 
         me.applyClientRects(true);
-        vdom.cn.push(picker.vdom);
-
-        me.promiseVdomUpdate().then(data => {
-            me.pickerIsMounted = true;
 
-            picker.mounted = me.pickerIsMounted;
+        listenerId = picker.on('mounted', () => {
+            picker.un('mounted', listenerId);
 
+            me.pickerIsMounted = true;
             callback?.apply(callbackScope || me);
         });
+
+        picker.render(true);
     }
 }
 

package/src/form/field/Select.mjs

@@ -132,7 +132,6 @@ class Select extends Picker {
             displayField  : me.displayField,
             parentId      : me.id,
             selectionModel: {stayInList: false},
-            silentSelect  : true,
             store         : me.store,
             ...me.listConfig
         });
@@ -227,6 +226,17 @@ class Select extends Picker {
     beforeSetStore(value, oldValue) {
         oldValue?.destroy();
 
+        // to reduce boilerplate code, a store config object without a defined model should default
+        // to displayField & valueField defaults
+        if (Neo.typeOf(value) === 'Object' && !value.model) {
+            value.model = {
+                fields: [
+                    {name: 'id',   type: 'String'},
+                    {name: 'name', type: 'String'}
+                ]
+            }
+        }
+
         return ClassSystemUtil.beforeSetInstance(value, Store);
     }