neo.mjs 6.13.0 → 6.15.0

package/src/main/addon/Navigator.mjs

@@ -295,7 +295,7 @@ class Navigator extends Base {
         if (typeof el.click === 'function') {
             el.click();
         }
-        // It operates through a listenert, so needs an event firing into it.
+        // It operates through a listener, so needs an event firing into it.
         else {
             const
                 rect    = el.getBoundingClientRect(),
@@ -324,7 +324,7 @@ class Navigator extends Base {
         if (!data.subject) {
             // If subject has been unmounted, we cannot navigate
             if (!(data = DomAccess.getElement(data.id)?.$navigator)) {
-                return;
+                return
             }
         }
 
@@ -344,8 +344,8 @@ class Navigator extends Base {
 
         // Scroll the target into view smoothly before we focus it without triggering a scroll
         newActiveElement.scrollIntoView({
-            block    : 'nearest',
-            behavior : 'smooth'
+            behavior : 'smooth',
+            block    : 'nearest'
         });
 
         // Find a focusable element which may be the item, or inside the item to draw focus to.
@@ -356,7 +356,7 @@ class Navigator extends Base {
         if (focusTarget) {
             focusTarget.focus({ preventScroll : true });
         }
-        // If not, we programatically navigate there
+        // If not, we programmatically navigate there
         else {
             this.setActiveItem(newActiveElement, data);
         }
@@ -377,34 +377,37 @@ class Navigator extends Base {
         data.activeIndex = newActiveElement ? allItems.indexOf(newActiveElement) : -1;
 
         newActiveElement.scrollIntoView({
-            block    : 'nearest',
-            inline   : 'nearest',
-            nehavior : 'smooth'
+            behavior: 'smooth',
+            block   : 'nearest',
+            inline  : 'nearest'
         });
 
         // Link the event source or the encapsulating element to the active item for A11Y
         (data.eventSource || data.subject).setAttribute('aria-activedescendant', data.activeItem.id);
 
-        DomEvents.sendMessageToApp({
-            type                : 'neonavigate',
-            target              : data.id,
-            path                : [{
-                id : data.id
-            }],
-            activeItem          : data.activeItem.id,
-            previousActiveItem  : data.previousActiveItem?.id,
-            activeIndex         : data.activeIndex,
-            previousActiveIndex : data.previousActiveIndex,
-            altKey              : Neo.altKeyDown,
-            ctrlKey             : Neo.controlKeyDown,
-            metaKey             : Neo.metaKeyDown,
-            shiftKey            : Neo.shiftKeyDown
-        });
+        // navigating to the same element should get ignored
+        if (data.activeItem !== data.previousActiveItem) {
+            DomEvents.sendMessageToApp({
+                type                : 'neonavigate',
+                target              : data.id,
+                path                : [{
+                    id : data.id
+                }],
+                activeItem          : data.activeItem.id,
+                previousActiveItem  : data.previousActiveItem?.id,
+                activeIndex         : data.activeIndex,
+                previousActiveIndex : data.previousActiveIndex,
+                altKey              : Neo.altKeyDown,
+                ctrlKey             : Neo.controlKeyDown,
+                metaKey             : Neo.metaKeyDown,
+                shiftKey            : Neo.shiftKeyDown
+            })
+        }
 
         // Navigation causes click if autoClick set.
         // TabPanels work like this.
         if (data.autoClick) {
-            this.clickItem(newActiveElement);
+            this.clickItem(newActiveElement)
         }
     }
 

package/src/selection/ListModel.mjs

@@ -58,13 +58,13 @@ class ListModel extends Model {
      * @param {Object} data
      */
     onListClick({ currentTarget }) {
-        const { view } = this;
+        const {view} = this;
 
         if (!view.disableSelection) {
             const record = view.store.get(view.getItemRecordId(currentTarget));
 
             if (record) {
-                this.select(record);
+                this.select(record)
             }
         }
     }
@@ -74,8 +74,8 @@ class ListModel extends Model {
      */
     onListNavigate(data) {
         const
-            { view }  = this,
-            { store } = view;
+            {view}  = this,
+            {store} = view;
 
         data.record      = store.getAt(Math.min(data.activeIndex, store.getCount()));
         view._focusIndex = store.indexOf(data.record); // silent update, no need to refocus
@@ -89,16 +89,16 @@ class ListModel extends Model {
     register(component) {
         super.register(component);
 
-        let me   = this,
-            id   = me.id,
-            view = me.view;
+        let me         = this,
+            {id, view} = me;
 
         view.addDomListeners([{
-            click    : me.onListClick,
+            click: me.onListClick,
+            scope: me,
 
             // Should be `.${view.itemCls}:not(.neo-disabled,.neo-list-header)`
             // TODO parse delegate selectors
-            delegate : path => {
+            delegate: path => {
                 for (let i = 0, { length } = path; i < length; i++) {
                     const { cls } = path[i];
 
@@ -106,12 +106,11 @@ class ListModel extends Model {
                         return i;
                     }
                 }
-            },
-            scope    : me
+            }
         }, {
             neonavigate : me.onListNavigate,
-            scope    : me
-        }])
+            scope       : me
+        }]);
 
         view.keys?._keys.push(
             {fn: 'onKeyDownDown'   ,key: 'Down'   ,scope: id},
@@ -132,7 +131,7 @@ class ListModel extends Model {
             itemId    = recordKey && view.getItemId(recordKey);
 
         if (itemId) {
-            this.select(itemId);
+            this.select(itemId)
         }
     }
 

package/src/selection/Model.mjs

@@ -217,16 +217,16 @@ class Model extends Base {
      * @param {String} [selectedCls]
      */
     select(items, itemCollection=this.items, selectedCls) {
-        let me   = this,
-            view = me.view,
-            vdom = view.vdom;
+        let me     = this,
+            {view} = me;
 
         // We hold vdom ids for now, so all incoming selections must be converted.
-        items = (items = Array.isArray(items) ? items : [items]).map(item => item.isRecord ? view.getItemId(item) : Neo.isObject(item) ? item.id : item)
+        items = (items = Array.isArray(items) ?
+            items : [items]).map(item => item.isRecord ? view.getItemId(item) : Neo.isObject(item) ? item.id : item);
 
         if (!Neo.isEqual(itemCollection, items)) {
             if (me.singleSelect) {
-                me.deselectAll(true);
+                me.deselectAll(true)
             }
 
             items.forEach((node, i) => {
@@ -234,22 +234,22 @@ class Model extends Base {
 
                 if (node) {
                     node.cls = NeoArray.add(node.cls || [], selectedCls || me.selectedCls);
-                    node['aria-selected'] = true;
+                    node['aria-selected'] = true
                 }
             });
 
             NeoArray.add(itemCollection, items);
 
-            view[view.silentSelect ? '_vdom' : 'vdom'] = vdom;
+            !view.silentSelect && view.update();
 
             view.onSelect?.(items);
 
             me.fire('selectionChange', {
-                selection : itemCollection
-            });
+                selection: itemCollection
+            })
         }
         else {
-            me.fire('noChange');
+            me.fire('noChange')
         }
     }
 

package/src/toolbar/Paging.mjs

@@ -1,5 +1,5 @@
 import ClassSystemUtil from '../util/ClassSystem.mjs';
-import SelectField     from '../form/field/Select.mjs';
+import ComboBox        from '../form/field/ComboBox.mjs';
 import Toolbar         from './Base.mjs';
 
 /**
@@ -75,7 +75,7 @@ class Paging extends Toolbar {
                 text : 'Rows per page:'
             },
             rowsPerPage: {
-                module       : SelectField,
+                module       : ComboBox,
                 clearable    : false,
                 hideLabel    : true,
                 listConfig   : {highlightFilterValue: false},

package/src/util/HashHistory.mjs

@@ -56,6 +56,7 @@ class HashHistory extends Base {
      * @param {String} data.appName
      * @param {Object} data.hash
      * @param {String} data.hashString
+     * @param {Number} data.windowId
      */
     push(data) {
         let me    = this,

package/src/worker/App.mjs

@@ -370,7 +370,11 @@ class App extends Base {
             app = module.onStart();
 
             // short delay to ensure Component Controllers are ready
-            config.hash && setTimeout(() => HashHistory.push(config.hash), 5)
+            config.hash && setTimeout(() => {
+                HashHistory.push(config.hash);
+                // apps which will get created later must not use outdated hash values
+                delete config.hash
+            }, 5)
         })
     }
 

package/src/worker/Manager.mjs

@@ -6,12 +6,11 @@ import Observable         from '../core/Observable.mjs';
 import RemoteMethodAccess from './mixin/RemoteMethodAccess.mjs';
 
 const NeoConfig = Neo.config,
-      devMode   = NeoConfig.environment === 'development',
-      windowId  = new Date().getTime();
+      devMode   = NeoConfig.environment === 'development';
 
 /**
  * The worker manager lives inside the main thread and creates the App, Data & VDom worker.
- * Also responsible for sending messages from the main thread to the different workers.
+ * Also, responsible for sending messages from the main thread to the different workers.
  * @class Neo.worker.Manager
  * @extends Neo.core.Base
  * @singleton
@@ -72,6 +71,12 @@ class Manager extends Base {
          * @protected
          */
         webWorkersEnabled: false,
+        /**
+         * Using the current timestamp as an unique window identifier
+         * @member {Number} windowId=new Date().getTime()
+         * @protected
+         */
+        windowId: new Date().getTime(),
         /**
          * Contains the fileNames for the App, Data & Vdom workers
          * @member {Object} workers
@@ -174,9 +179,10 @@ class Manager extends Base {
      * Calls createWorker for each worker inside the this.workers config.
      */
     createWorkers() {
-        let me     = this,
-            config = Neo.clone(NeoConfig, true),
-            hash   = location.hash,
+        let me       = this,
+            config   = Neo.clone(NeoConfig, true),
+            hash     = location.hash,
+            windowId = me.windowId,
             key, value;
 
         // remove configs which are not relevant for the workers scope
@@ -186,7 +192,8 @@ class Manager extends Base {
         if (hash) {
             config.hash = {
                 hash      : DomEvents.parseHash(hash.substring(1)),
-                hashString: hash.substring(1)
+                hashString: hash.substring(1),
+                windowId  : me.windowId
             }
         }
 

package/test/components/app.mjs

@@ -3,7 +3,7 @@
 
 import '../../src/button/Base.mjs';
 import '../../src/component/DateSelector.mjs';
+import '../../src/form/field/ComboBox.mjs';
 import '../../src/list/Chip.mjs';
-import '../../src/form/field/Select.mjs';
 
 export const onStart = () => Neo.app({name: 'AppEmpty'})

package/test/components/files/form/field/{Select.mjs → ComboBox.mjs}

@@ -3,7 +3,7 @@ StartTest(t => {
 
     async function setup(config = {}) {
         testId = await Neo.worker.App.createNeoInstance(Neo.merge({
-            ntype        : 'selectfield',
+            ntype        : 'combobox',
             labelPosition: 'inline',
             labelText    : 'US States',
             labelWidth   : 80,
@@ -17,10 +17,10 @@ StartTest(t => {
                 model: {
                     fields: [{
                         name: 'abbreviation',
-                        type: 'string'
+                        type: 'String'
                     }, {
                         name: 'name',
-                        type: 'string'
+                        type: 'String'
                     }]
                 }
             }
@@ -202,17 +202,19 @@ StartTest(t => {
 
         await t.waitFor(100);
 
-        // Inputs must have been cleared. Both typeahead and filter.
-        t.isDeeply(t.query(`#${testId} input`).map(i => i.value), ['', '']);
+        // typeahead input must be cleared, forceSelection must pick the closest value onFocusLeave
+        // todo: add another test without forceSelection => Inputs must have been cleared. Both typeahead and filter.
+        t.isDeeply(t.query(`#${testId} input`).map(i => i.value), ['', 'Marshall Islands']);
 
         blurEl.remove();
     });
 
     t.it('With store as data', async t => {
         await setup({
-            labelText : 'Foo',
-            store     : ['Foo', 'Bar', 'Bletch']
+            labelText: 'Foo',
+            store    : ['Foo', 'Bar', 'Bletch']
         });
+
         await t.click('.neo-field-trigger.fa-caret-down');
 
         await t.waitForSelector('.neo-list-item:contains(Foo)');

package/test/components/siesta.js

@@ -82,7 +82,7 @@ project.plan({
     items: [{
         group: 'field',
         items: [
-            'files/form/field/Select.mjs',
+            'files/form/field/ComboBox.mjs',
             'files/form/field/Text.mjs'
         ]
     }]

package/resources/scss/theme-dark/form/field/Select.scss

@@ -1,9 +0,0 @@
-:root .neo-theme-dark { // .neo-selectfield
-    --selectfield-input-hint-color              : #bbb;
-    --selectfield-input-hint-opacity            : 0.6;
-    --selectfield-list-search-background-color  : inherit;
-    --selectfield-list-search-color             : #fff;
-    --selectfield-list-search-color-selected    : #000;
-    --selectfield-picker-container-border       : 1px solid #bbb;
-    --selectfield-picker-container-border-radius: 0;
-}

package/resources/scss/theme-light/form/field/Select.scss

@@ -1,9 +0,0 @@
-:root .neo-theme-light { // .neo-selectfield
-    --selectfield-input-hint-color              : #333;
-    --selectfield-input-hint-opacity            : 0.6;
-    --selectfield-list-search-background-color  : inherit;
-    --selectfield-list-search-color             : red;
-    --selectfield-list-search-color-selected    : red;
-    --selectfield-picker-container-border       : 1px solid #1c60a0;
-    --selectfield-picker-container-border-radius: 3px;
-}

package/resources/scss/theme-neo-light/form/field/Select.scss

@@ -1,9 +0,0 @@
-:root .neo-theme-neo-light { // .neo-selectfield
-    --selectfield-input-hint-color              : #333;
-    --selectfield-input-hint-opacity            : 0.6;
-    --selectfield-list-search-background-color  : inherit;
-    --selectfield-list-search-color             : red;
-    --selectfield-list-search-color-selected    : red;
-    --selectfield-picker-container-border       : 1px solid #1c60a0;
-    --selectfield-picker-container-border-radius: 3px;
-}