neo.mjs 6.10.13 → 6.10.15

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.13'
+         * @member {String} version='6.10.15'
          */
-        version: '6.10.13'
+        version: '6.10.15'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.13'
+         * @member {String} version='6.10.15'
          */
-        version: '6.10.13'
+        version: '6.10.15'
     }
 
     /**

package/examples/dialog/MainContainer.mjs

@@ -36,6 +36,8 @@ class MainContainer extends Viewport {
         let me = this;
 
         me.items = [{
+            html : '<h3>The dialog is invoked from the "Create Dialog" button</h3><h1>Hide it by pressing the ESCAPE key. The button will be refocused</h1>'
+        }, {
             module: Toolbar,
             items :[{
                 module   : Button,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name"            : "neo.mjs",
-  "version"         : "6.10.13",
+  "version"         : "6.10.15",
   "description"     : "The webworkers driven UI framework",
   "type"            : "module",
   "repository"      : {
@@ -60,7 +60,7 @@
     "siesta-lite"                   : "5.5.2",
     "showdown"                      : "^2.1.0",
     "url"                           : "^0.11.3",
-    "webpack"                       : "^5.89.0",
+    "webpack"                       : "^5.90.0",
     "webpack-cli"                   : "^5.1.4",
     "webpack-dev-server"            : "4.15.1",
     "webpack-hook-plugin"           : "^1.0.7",

package/resources/data/deck/learnneo/p/Earthquakes.md

@@ -183,7 +183,6 @@ later in the lab.
 
 <img style="width:80%" src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EmptyEarthquakes.png"></img>
 
-
 </details>
 
 <details>
@@ -349,6 +348,7 @@ will show the container hierarchy for the selected component.
 At this point the app is so simple there's not much to see, but in a more complex app you can see the hierarchy
 and inspect or update component.
 
+
 ##Lab. Debugging
 
 In this lab you'll get a little debugging practice by getting component references, changing properties, 
@@ -1403,7 +1403,4 @@ Save, refresh, and confirm that you see the value logged when you click on a map
 
 </details>
 
-
-
-
 <!-- /lab -->

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -76,4 +76,5 @@
     .lab:hover {
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     }
+
 }

package/resources/scss/src/list/Base.scss

@@ -109,6 +109,14 @@
                 background-color: var(--list-item-background-color-active);
                 color           : var(--list-container-list-color);
             }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
+            &:active {
+                background-color: var(--list-item-background-color-active);
+                color           : var(--list-container-list-color);
+            }
         }
 
         &.neo-navigator-active-item {

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.10.13'
+     * @default '6.10.15'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.10.13'
+    version: '6.10.15'
 };
 
 Object.assign(DefaultConfig, {

package/src/component/Base.mjs

@@ -643,6 +643,10 @@ class Base extends CoreBase {
             me[state]()
         }
 
+        if (!value) {
+            me.revertFocus();
+        }
+
         me.fire(state, {id: me.id});
         me.fire('hiddenChange', {id: me.id, oldValue, value})
     }
@@ -781,10 +785,25 @@ class Base extends CoreBase {
 
                 if (me.floating) {
                     me.alignTo();
+
+                    // Focus will be pushed into the first input field or other focusable item
+                    Neo.main.DomAccess.focus({
+                        id       : this.id,
+                        children : true
+                    });
                 }
 
                 me.fire('mounted', me.id)
             }
+            else {
+                me.revertFocus();
+            }
+        }
+    }
+
+    revertFocus() {
+        if (this.containsFocus && this.focusEnterData?.relatedTarget) {
+            Neo.getComponent(this.focusEnterData.relatedTarget.id)?.focus();
         }
     }
 
@@ -1131,6 +1150,7 @@ class Base extends CoreBase {
 
         if (value) {
             value = ClassSystemUtil.beforeSetInstance(value, KeyNavigation, {
+                keyDownEventBubble : true,
                 keys: value
             })
         }
@@ -1257,6 +1277,8 @@ class Base extends CoreBase {
             parentModel = parent?.getModel(),
             parentVdom;
 
+        me.revertFocus();
+
         me.domListeners = [];
 
         me.controller = null; // triggers destroy()
@@ -1816,6 +1838,16 @@ class Base extends CoreBase {
         this.keys?.register(this)
     }
 
+    onFocusEnter(data) {
+        // If we are hidden, or unmounted while we still contain focus, we have to revert
+        // focus to where it came from if possible
+        this.focusEnterData = data;
+    }
+
+    onFocusLeave() {
+        this.focusEnterData = null;
+    }
+
     /**
      * Triggered by manager.Focus
      * @name onFocusEnter

package/src/data/RecordFactory.mjs

@@ -79,7 +79,7 @@ class RecordFactory extends Base {
 
                         if (Array.isArray(model.fields)) {
                             model.fields.forEach(field => {
-                                let value  = config[field.name],
+                                let value  = config[field.mapping || field.name],
                                     symbol = Symbol.for(field.name),
                                     parsedValue;
 
@@ -212,7 +212,7 @@ class RecordFactory extends Base {
      * @returns {Boolean}
      */
     isRecord(record) {
-        return record?.[Symbol.for('isRecord')] || false;
+        return record?.isRecord;
     }
 
     /**

package/src/dialog/Base.mjs

@@ -100,6 +100,9 @@ class Base extends Panel {
          * @protected
          */
         isDragging: false,
+        keys: {
+            Escape: 'onKeyDownEscape'
+        },
         /**
          * @member {String} maximizeCls='far fa-window-maximize'
          */
@@ -216,8 +219,7 @@ class Base extends Panel {
      * @protected
      */
     afterSetDraggable(value, oldValue) {
-        let me           = this,
-            domListeners = me.domListeners,
+        let me = this,
             cls;
 
         if (oldValue !== undefined && me.headerToolbar) {
@@ -230,21 +232,21 @@ class Base extends Panel {
             DragZone = module.default;
 
             if (!me.dragListenersAdded) {
-                domListeners.push(
+                const dragListeners = [
                     {'drag:end'  : me.onDragEnd,   scope: me, delegate: '.neo-header-toolbar'},
                     {'drag:start': me.onDragStart, scope: me, delegate: '.neo-header-toolbar'}
-                );
+                ];
 
                 if (me.dragZoneConfig?.alwaysFireDragMove) {
-                    domListeners.push(
+                    dragListeners.push(
                         {'drag:move': me.onDragMove, scope: me, delegate: '.neo-header-toolbar'}
                     )
                 }
 
-                me.domListeners       = domListeners;
+                me.domListeners       = [...me.domListeners, ...dragListeners];
                 me.dragListenersAdded = true
             }
-        })
+        });
     }
 
     /**
@@ -444,6 +446,7 @@ class Base extends Panel {
     close(animate=!!this.animateTargetId) {
         let me = this;
 
+        me.revertFocus();
         if (animate) {
             me.animateHide()
         } else {
@@ -694,6 +697,10 @@ class Base extends Panel {
         }
     }
 
+    onKeyDownEscape() {
+        this.hidden = true;
+    }
+
     /**
      * @param {Boolean} animate=!!this.animateTargetId
      */

package/src/form/field/Picker.mjs

@@ -282,7 +282,15 @@ class Picker extends Text {
      * @protected
      */
     onKeyDownEscape(data) {
-        this.pickerIsMounted && this.hidePicker()
+        if (this.pickerIsMounted) {
+            this.hidePicker();
+
+            // We processed this event, and it should not proceed to ancestor components
+            data.cancelBubble = true;
+
+            // And no further listeers should be notified
+            return false;
+        }
     }
 
     /**

package/src/form/field/Select.mjs

@@ -219,20 +219,40 @@ class Select extends Picker {
      * @protected
      */
     beforeSetStore(value, oldValue) {
+        const
+            me                          = this,
+            { valueField, displayField} = me;
+
         oldValue?.destroy();
 
+        // Promote an array of items to be a Store
+        if (Array.isArray(value)) {
+            value = {
+                data : value.map((v, i) => {
+                    // Simplest case is just picking string values.
+                    if (typeof v === 'string') {
+                        v = {
+                            [valueField]   : v,
+                            [displayField] : v
+                        };
+                    }
+                    return v;
+                })
+            };
+        }
+
         // 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.module && !value.ntype) {
             value.model = {
                 fields: [
-                    {name: 'id',   type: 'String'},
-                    {name: 'name', type: 'String'}
+                    {name: valueField,   type: 'String'},
+                    {name: displayField, type: 'String'}
                 ]
             }
         }
 
-        return ClassSystemUtil.beforeSetInstance(value, Store)
+        return ClassSystemUtil.beforeSetInstance(value, Store);
     }
 
     /**
@@ -515,7 +535,6 @@ class Select extends Picker {
 
             me.activeRecord = store.getAt(activeIndex)
             me.activeRecordId = me.activeRecord[store.keyProperty || model.keyProperty]
-            me.getInputEl()['aria-activedescendant'] = activeItem;
 
             // Update typeahead hint (which updates DOM), or update DOM
             me.typeAhead ? me.updateTypeAheadValue(me.lastManualInput) : me.update();

package/src/form/field/Text.mjs

@@ -1266,6 +1266,8 @@ class Text extends Base {
      * @protected
      */
     onFocusEnter(data) {
+        super.onFocusEnter(data);
+
         let me  = this,
             cls = me.cls;
 

package/src/main/DomAccess.mjs

@@ -360,10 +360,18 @@ class DomAccess extends Base {
         let node = this.getElement(data.id);
 
         if (node) {
-            node.focus();
+            // The children property means focus inner elements if possible.
+            if (!DomUtils.isFocusable(node) && data.children) {
+                // Prefer to focus input fields over buttons.
+                // querySelector('input,textarea,button') returns buttons first, so use multiple calls. 
+                node = node.querySelector('input:not(:disabled)') || node.querySelector('textarea:not(:disabled)') || node.querySelector('button:not(:disabled)') || [...node.querySelectorAll('*')].find(DomUtils.isFocusable);
+            }
+            if (node) {
+                node.focus();
 
-            if (Neo.isNumber(node.selectionStart)) {
-                node.selectionStart = node.selectionEnd = node.value.length;
+                if (Neo.isNumber(node.selectionStart)) {
+                    node.selectionStart = node.selectionEnd = node.value.length;
+                }
             }
         }
 

package/src/main/DomUtils.mjs

@@ -42,9 +42,31 @@ export default class DomUtils extends Base {
         }
     }
 
+    /**
+     * Analogous to the `HTMLElement` `querySelectorAll` method. Searches the passed element
+     * and all descendants for all elements for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when a desired element is reached.
+     * @returns {HTMLElement[]} An array of matching elements
+     */
+    static queryAll(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].filter(filterFn);
+    }
+
+    /**
+     * Analogous to the `HTMLElement` `querySelector` method. Searches the passed element
+     * and all descendants for the first element for which the passed `filterFn` returns `true`.
+     * @param {HTMLElement} el The element to start from.
+     * @param {Function} filterFn A function which returns `true` when the desired element is reached.
+     * @returns {HTMLElement} The first matching element
+     */
+    static query(el, filterFn) {
+        return [el, ...el.querySelectorAll('*')].find(filterFn);
+    }
+
     static isFocusable(e) {
         // May be used as a scopeless callback, so use "DomUtils", not "this"
-        return DomUtils.isTabbable(e) || e.getAttribute('tabIndex') == -1;
+        return DomUtils.isTabbable(e) || Number(e.getAttribute('tabIndex')) < 0;
     }
 
     static isTabbable(e) {
@@ -53,8 +75,9 @@ export default class DomUtils extends Base {
             style        = getComputedStyle(e),
             tabIndex     = e.getAttribute('tabIndex');
 
-        // Hidden elements not tabbable
-        if (!e.offsetParent || style.getPropertyValue('visibility') === 'hidden') {
+        // Hidden elements are not tabbable.
+        // Negative tabIndex also means not tabbable (Though still focusable)
+        if (!e.isConnected || !e.offsetParent || style.getPropertyValue('visibility') === 'hidden' || Number(tabIndex) < 0) {
             return false
         }
 

package/src/main/addon/Navigator.mjs

@@ -3,6 +3,13 @@ import DomAccess from '../DomAccess.mjs';
 import DomUtils  from '../DomUtils.mjs';
 import DomEvents from '../DomEvents.mjs';
 
+// We do not need to inject a synthesized "click" event when we detect an ENTER
+// keypress on these element types.
+const enterActivatedTags= {
+    A      : 1,
+    BUTTON : 1
+};
+
 /**
  * Addon for Navigator
  * @class Neo.main.addon.Navigator
@@ -40,13 +47,27 @@ class Navigator extends Base {
      *
      * When navigation occurs from one navigable element to another, the `navigate` event
      * will be fired.
+     *
+     * Note that if focus is expected to enter the subject, the navigable elements
+     * designated by the `selector` must be focusable in some way. So if not using natively
+     * focusable elements, they must have `tabIndex="-1"`.
+     *
+     * Upon navigation, the `aria-activedescendant` property is automatically updated
+     * on the `eventSource` element (which defaults to the subject element, but may be external)
+     *
+     * Pressing `Enter` when an item is active clicks that item.
+     *
+     * if `autoClick` is set to `true` in the data, simply navigating to an element will click it.
      * @param {*} data
      * @param {String} data.id The element id to navigate in.
      * @param {String} [data.eventSource] Optional - the element id to read keystrokes from.
-     * defaults to the main element id.
+     * defaults to the main element id. Select field uses this. Focus remains in the field's
+     * `<input>` element while navigating its dropdown.
      * @param {String} data.selector A CSS selector which identifies the navigable elements.
      * @param {String} data.activeCls A CSS class to add to the currently active navigable element.
-     * @param {Boolean} wrap Pass as `true` to have navigation wrap from first to last and vice versa.
+     * @param {Boolean} data.wrap Pass as `true` to have navigation wrap from first to last and vice versa.
+     * @param {Boolean} [data.autoClick=false] Pass as `true` to have navigation click the target navigated to.
+     * TabPanels will use this on their tab toolbar.
      */
     subscribe(data) {
         const
@@ -60,12 +81,16 @@ class Navigator extends Base {
             data.activeCls = 'neo-navigator-active-item'
         }
 
+        // Ensure that only *one* of the child focusables is actually tabbable.
+        // We use arrow keys for internal navigation. TAB must move out.
+        me.fixItemFocusability(data);
+
         // Finds a focusable item starting from a descendant el within one of our selector items
         data.findFocusable = el => DomUtils.closest(el, el =>
             // We're looking for an element that is focusable
             DomUtils.isFocusable(el) &&
             // And within our subject element
-            (subject.compcompareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
+            (subject.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_CONTAINED_BY) &&
             // And within an element that matches our selector
             el.closest(data.selector)
         );
@@ -80,9 +105,39 @@ class Navigator extends Base {
         });
 
         eventSource.addEventListener('keydown', data.l1 = e => me.navigateKeyDownHandler(e, data));
-        subject.addEventListener('mousedown',    data.l2 = e => me.navigateMouseDownHandler(e, data));
-        subject.addEventListener('click',        data.l3 = e => me.navigateClickHandler(e, data));
-        subject.addEventListener('focusin',      data.l4 = e => me.navigateFocusInHandler(e, data));
+        subject.addEventListener('mousedown',   data.l2 = e => me.navigateMouseDownHandler(e, data));
+        subject.addEventListener('click',       data.l3 = e => me.navigateClickHandler(e, data));
+        subject.addEventListener('focusin',     data.l4 = e => me.navigateFocusInHandler(e, data));
+        subject.addEventListener('focusout',    data.l5 = e => me.navigateFocusOutHandler(e, data));
+    }
+
+    // The navigables we are dealing with, if they are focusable must *not* be tabbable.
+    // Only *one* must be tabbable, so that tabbing into the subject element goes to the
+    // one active element.
+    // 
+    // Tabbing *from* that must exit the subject element.
+    //
+    // So we must ensure that all the focusable elements except the first are not tabbable.
+    fixItemFocusability(data) {
+        // If the key events are being read from an external element, then that will always contain
+        // focus, so we have nothing to do here. The navigable items wil be inert and not
+        // focusable. Navigation will be "virtual". Select field navigates its dropdowns like this.
+        if (!data.subject.contains(data.eventSource)) {
+            return;
+        }
+
+        const
+            focusables        = DomUtils.queryAll(data.subject, DomUtils.isFocusable),
+            defaultActiveItem = focusables[0] || data.subject.querySelector(data.selector);
+
+        // Ensure the items are not tabbable.
+        // TAB navigates out of the subject.
+        focusables.forEach(e => e !== defaultActiveItem && (e.tabIndex = -1));
+
+        // Make at least one thing tabbable so focus can move into the subject element
+        if (defaultActiveItem) {
+            defaultActiveItem.tabIndex = 0;
+        }
     }
 
     unsubscribe(data) {
@@ -96,10 +151,15 @@ class Navigator extends Base {
             target.removeEventListener('mousedown',    data.l2);
             target.removeEventListener('click',        data.l3);
             target.removeEventListener('focusin',      data.l4);
+            target.removeEventListener('focusout',     data.l5);
         }
     }
 
+    // This is called if mutations take place within the subject element.
+    // We have to keep things in order if the list items change.
     navigateTargetChildListChange(mutations, data) {
+        this.fixItemFocusability(data);
+
         // Active item gone.
         // Try to activate the item at the same index;
         if (data.activeItem && !data.subject.contains(data.activeItem)) {
@@ -110,11 +170,33 @@ class Navigator extends Base {
     }
 
     navigateFocusInHandler(e, data) {
-        const target = e.target.closest(data.selector);
+        const
+            target            = e.target.closest(data.selector),
+            { relatedTarget } = e,
+            { subject }       = data;
 
         // If our targets are focusable and recieve focus, that is a navigation.
         if (target) {
             this.setActiveItem(target, data);
+
+            // This was internal navigation.
+            // The items must be focusable, but *not* tabbable.
+            // So remove tabbability on the last active item
+            if (subject.contains(relatedTarget)) {
+                relatedTarget.tabIndex = -1;
+            }
+        }
+    }
+
+    navigateFocusOutHandler(e, data) {
+        const { target } = e;
+
+        // Clear active class from the item we are leaving from.
+        target.closest(data.selector).classList.remove(data.activeCls);
+
+        // On focusout, leave the last active item as tabbable so user can TAB back in here
+        if (!DomUtils.isTabbable(target)) {
+            target.tabIndex = 0;
         }
     }
 
@@ -168,44 +250,36 @@ class Navigator extends Base {
             }
         }
 
-        let { key } = keyEvent,
+        let { key, target } = keyEvent,
             newActiveElement;
 
         switch(key) {
+            // Move to the previous navigable item
             case data.previousKey:
                 newActiveElement = me.navigateGetAdjacent(-1, data);
                 if (!newActiveElement && wrap) {
                     newActiveElement = subject.querySelector(`${data.selector}:last-of-type`);
                 }
                 break;
+            // Move to the next navigable item
             case data.nextKey:
                 newActiveElement = me.navigateGetAdjacent(1, data);
                 if (!newActiveElement && wrap) {
                     newActiveElement = subject.querySelector(data.selector);
                 }
                 break;
+            // Move to the first navigable item
             case 'Home':
                 newActiveElement = subject.querySelector(data.selector);
                 break;
+            // Move to the last navigable item
             case 'End':
                 newActiveElement = subject.querySelector(`${data.selector}:last-of-type`);
                 break;
+            // Click the currently active item if necessary
             case 'Enter':
-                if (data.activeItem) {
-                    const
-                        rect    = data.activeItem.getBoundingClientRect(),
-                        clientX = rect.x + (rect.width / 2),
-                        clientY = rect.y + (rect.height / 2);
-
-                    data.activeItem.dispatchEvent(new MouseEvent('click', {
-                        bubbles  : true,
-                        altKey   : Neo.altKeyDown,
-                        ctrlKey  : Neo.controlKeyDown,
-                        metaKey  : Neo.metaKeyDown,
-                        shiftKey : Neo.shiftKeyDown,
-                        clientX,
-                        clientY
-                    }))
+                if (data.activeItem && !enterActivatedTags[target.tagName]) {
+                    this.clickItem(data.activeItem);
                 }
         }
 
@@ -215,6 +289,30 @@ class Navigator extends Base {
         }
     }
 
+    clickItem(el) {
+        // The element knows how to click itself.
+        if (typeof el.click === 'function') {
+            el.click();
+        }
+        // It operates through a listenert, so needs an event firing into it.
+        else {
+            const
+                rect    = el.getBoundingClientRect(),
+                clientX = rect.x + (rect.width / 2),
+                clientY = rect.y + (rect.height / 2);
+
+            el.dispatchEvent(new MouseEvent('click', {
+                bubbles  : true,
+                altKey   : Neo.altKeyDown,
+                ctrlKey  : Neo.controlKeyDown,
+                metaKey  : Neo.metaKeyDown,
+                shiftKey : Neo.shiftKeyDown,
+                clientX,
+                clientY
+            }));
+        }
+    }
+
     /**
      * Navigates to the passed 
      * @param {String|Number} newActiveElement The id of the new active element in the subject
@@ -245,7 +343,7 @@ class Navigator extends Base {
 
         // Find a focusable element which may be the item, or inside the item to draw focus to.
         // For example a Chip list in which .neo-list-items contain focusable Chips.
-        const focusTarget = [newActiveElement, ...newActiveElement.querySelectorAll('*')].find(DomUtils.isFocusable);
+        const focusTarget = DomUtils.query(newActiveElement, DomUtils.isFocusable);
 
         // If the item contains a focusable, we focus it and then react in navigateFocusInHandler
         if (focusTarget) {
@@ -275,7 +373,10 @@ class Navigator extends Base {
             block    : 'nearest',
             inline   : 'nearest',
             nehavior : 'smooth'
-        })
+        });
+
+        // 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',
@@ -291,7 +392,13 @@ class Navigator extends Base {
             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);
+        }
     }
 
     navigateGetAdjacent(direction = 1, data) {

package/src/manager/DomEvent.mjs

@@ -111,7 +111,10 @@ class DomEvent extends Base {
                 // console.log('fire', eventName, data, listeners, path);
 
                 if (Array.isArray(listeners)) {
-                    listeners.forEach(listener => {
+                    // Stop iteration if a handler returns false
+                    listeners.every(listener => {
+                        let result;
+
                         if (listener && listener.fn) {
                             delegationTargetId = me.verifyDelegationPath(listener, data.path);
 
@@ -131,7 +134,7 @@ class DomEvent extends Base {
 
                                     // Handler needs to know which actual target matched the delegate
                                     data.currentTarget = delegationTargetId;
-                                    listener.fn.apply(listener.scope || globalThis, [data]);
+                                    result = listener.fn.apply(listener.scope || globalThis, [data]);
 
                                     if (!listener.bubble) {
                                         bubble = false;
@@ -139,6 +142,8 @@ class DomEvent extends Base {
                                 }
                             }
                         }
+                        // If a listener returns false, we stop iterating the listeners
+                        return result !== false
                     });
                 }
             }
@@ -153,7 +158,8 @@ class DomEvent extends Base {
                 break;
             }
 
-            if (!bubble) {
+            // Honour the Event cancelBubble property
+            if (!bubble || data.cancelBubble) {
                 break;
             }
         }

package/src/manager/Focus.mjs

@@ -168,7 +168,9 @@ class Focus extends CoreBase {
      * @protected
      */
     setComponentFocus(opts, containsFocus) {
-        let data = {},
+        let data = {
+                relatedTarget : opts.data.relatedTarget
+            },
             components = opts.componentPath.map(id => Neo.getComponent(id)),
             handler;
 

package/test/components/files/form/field/Select.mjs

@@ -63,7 +63,7 @@ StartTest(t => {
 
         await t.waitForSelector('.neo-picker-container');
 
-        t.hasAttributeValue(inputField, 'aria-expanded', 'true');
+        await t.waitFor(() => inputField.getAttribute('aria-expanded') === 'true');
 
         // Roles correct
         t.hasAttributeValue('.neo-picker-container .neo-list', 'role', 'listbox');
@@ -80,6 +80,8 @@ StartTest(t => {
 
         t.hasAttributeValue(inputField, 'aria-activedescendant', 'neo-list-1__AL');
 
+        await t.waitFor(100);
+
         // Select that first item.
         await t.type(null, '[ENTER]');
 
@@ -100,7 +102,7 @@ StartTest(t => {
         t.is(blurCount, 1);
     });
 
-    t.iit('Keyboard navigation', async t => {
+    t.it('Keyboard navigation', async t => {
         await setup();
         const blurEl = document.createElement('input');
         document.body.appendChild(blurEl);
@@ -128,6 +130,8 @@ StartTest(t => {
 
         await t.waitForSelectorNotFound('.neo-picker-container:visible');
 
+        await t.waitFor(100);
+
         t.is(inputField.value, 'Wyoming');
 
         await t.type(null, '[DOWN]');
@@ -139,11 +143,13 @@ StartTest(t => {
 
         await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Wisconsin")');
 
+        await t.waitFor(100);
+
         await t.type(null, '[ENTER]');
 
         await t.waitForSelectorNotFound('.neo-picker-container:visible');
 
-        t.is(inputField.value, 'Wisconsin');
+        await t.waitFor(() => inputField.value === 'Wisconsin');
 
         await t.type(null, '[DOWN]');
 
@@ -183,6 +189,8 @@ StartTest(t => {
         // Picker Must show with Maryland activated
         await t.waitForSelector('.neo-list-item.neo-navigator-active-item:contains("Maryland")');
 
+        await t.waitFor(100);
+
         // Matches three states
         t.selectorCountIs('.neo-picker-container .neo-list-item', 3);
 
@@ -192,11 +200,24 @@ StartTest(t => {
         // Blur without selecting a value
         await t.type(null, '[TAB]');
 
-        await t.waitFor(100)
+        await t.waitFor(100);
 
         // Inputs must have been cleared. Both typeahead and filter.
         t.isDeeply(t.query(`#${testId} input`).map(i => i.value), ['', '']);
 
         blurEl.remove();
     });
+
+    t.it('With store as data', async t => {
+        await setup({
+            labelText : 'Foo',
+            store     : ['Foo', 'Bar', 'Bletch']
+        });
+        await t.click('.neo-field-trigger.fa-caret-down');
+
+        await t.waitForSelector('.neo-list-item:contains(Foo)');
+
+        // All data ityems represented
+        t.selectorCountIs('.neo-list-item', 3);
+    });
 });