@momentum-design/components 0.133.20 → 0.133.22

package/dist/components/popover/popover.component.js

@@ -801,7 +801,10 @@ class Popover extends KeyDownHandledMixin(KeyToActionMixin(BackdropMixin(Prevent
             this.setAttribute('color', Object.values(COLOR).includes(this.color) ? this.color : DEFAULTS.COLOR);
         }
         if (changedProperties.has('appendTo')) {
-            if (this.appendTo) {
+            // only setup appendTo when the component is connected to the DOM
+            // this fixes an issue which causes popovers to be orphaned in the DOM without the appendTo logic being cleaned up,
+            // cause of Lit deferring the updated() to fire after a disconnect
+            if (this.appendTo && this.isConnected) {
                 this.utils.setupAppendTo();
             }
             else {

package/dist/components/searchfield/searchfield.component.d.ts

@@ -110,6 +110,12 @@ declare class Searchfield extends Searchfield_base {
      * @param event - Keyboard event
      */
     handleKeyDown(event: KeyboardEvent): void;
+    /**
+     * Overrides the focus method to allow programmatically focusing the input field.
+     * Delegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior.
+     * @param options - Focus options
+     */
+    focus(options?: FocusOptions): void;
     disconnectedCallback(): void;
     connectedCallback(): void;
     /**

package/dist/components/searchfield/searchfield.component.js

@@ -234,6 +234,15 @@ class Searchfield extends ControlTypeMixin(KeyDownHandledMixin(Input)) {
             this.keyDownEventHandled();
         }
     }
+    /**
+     * Overrides the focus method to allow programmatically focusing the input field.
+     * Delegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior.
+     * @param options - Focus options
+     */
+    focus(options) {
+        var _a;
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.focus(options);
+    }
     disconnectedCallback() {
         var _a;
         super.disconnectedCallback();

package/dist/custom-elements.json

@@ -38747,6 +38747,26 @@
                 "module": "components/formfieldwrapper/formfieldwrapper.component.js"
               }
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "Focus options"
+                }
+              ],
+              "description": "Overrides the focus method to allow programmatically focusing the input field.\nDelegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior."
+            },
             {
               "kind": "field",
               "name": "handleFilterContainerClick"
@@ -40354,6 +40374,30 @@
               "attribute": "display-popover",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "focus",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "options",
+                  "optional": true,
+                  "type": {
+                    "text": "FocusOptions"
+                  },
+                  "description": "Focus options"
+                }
+              ],
+              "description": "Overrides the focus method to allow programmatically focusing the input field.\nDelegate focus didn't work as expect since we have a scrollable container that contains both chips and the input, and we want to focus the input when the component itself is focused. We need to override the focus method to achieve this behavior.",
+              "inheritedFrom": {
+                "name": "Searchfield",
+                "module": "components/searchfield/searchfield.component.js"
+              }
+            },
             {
               "kind": "field",
               "name": "handleFilterContainerClick",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.133.20",
+  "version": "0.133.22",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"