@salesforcedevs/dx-components 1.40.5-topic-alpha.6 → 1.40.5-topic-alpha.8

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.40.5-topic-alpha.6",
+    "version": "1.40.5-topic-alpha.8",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/popover/popover.ts

@@ -240,6 +240,16 @@ export default class Popover extends LightningElement {
                 this.dispatchEvent(new CustomEvent("controlarrowdown"));
                 break;
             }
+            // A mouse-opened menu leaves focus on the control, so Escape lands
+            // here, not in the popover's own key handler.
+            case "Esc":
+            case "Escape": {
+                if (this.open) {
+                    this.dispatchRequestCloseEvent("keypress-escape");
+                    this.closePopover(true);
+                }
+                break;
+            }
             default:
         }
     };

package/src/modules/dx/treeItem/treeItem.css

@@ -4,22 +4,32 @@
     display: block;
 }
 
+/* Always positioned, so a picker menu keeps the same anchor when focus
+   leaves. Toggling position on focus moved the closing menu up the page. */
+:host {
+    position: relative;
+}
+
 /* Lift this row above later sibling pickers while its menu is open. */
 :host(:focus-within) {
-    position: relative;
     z-index: 2;
 }
 
-/* The tile's keyboard focus layers fill this row, picker included. isolate
-   keeps the fill above the row's background and below its content. */
 .tree-item-row {
     position: relative;
-    isolation: isolate;
     display: flex;
     align-items: center;
     min-width: 0;
 }
 
+/* The tile's keyboard focus layers fill this row, picker included. isolate
+   keeps the fill above the row's background and below its content. Only while
+   focus is inside: a row that is always isolated traps its picker's menu, and
+   later rows cover the menu while it fades out after a click outside. */
+.tree-item-row:focus-within {
+    isolation: isolate;
+}
+
 .tree-item-row dx-tree-tile {
     flex: 1;
     min-width: 0;