fix: input clear button focus trap (#1864)

* fix: input clear button focus trap

web-components/.storybook/themeDecorator.js

@@ -9,5 +9,5 @@ export const withThemeDecorator = (story, context) => {
   themeManager.setDarkMode(isDark);
   themeManager.setThemeName(theme);  
 
-  return html` <md-theme class="theme-toggle" ?darkTheme=${isDark} theme=${theme}> ${story()} </md-theme>`;
+  return html` <md-theme class="theme-toggle" ?darkTheme=${themeManager.isDarkMode} theme=${themeManager.themeName}> ${story()} </md-theme>`;
 };

web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.16.17",
+  "version": "2.16.18",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

web-components/src/components/datepicker/DatePicker.ts

@@ -214,7 +214,7 @@ export namespace DatePicker {
         : undefined;
     };
 
-    isValueValid = () => {
+    isValueValid = (): boolean => {
       if (!this.value && this.value !== EMPTY_STRING) return true;
       const dateRangePicker = closestElement("md-date-range-picker", this) as DateRangePicker.ELEMENT;
       const regexString =
@@ -227,7 +227,7 @@ export namespace DatePicker {
 
       const filters: DayFilters = { maxDate: this.maxDateData, minDate: this.minDateData, filterDate: this.filterDate };
       const isValid =
-        this.value &&
+        !!this.value &&
         regex.test(this.value) &&
         !isDayDisabled(DateTime.fromISO(this.value, { locale: this.locale }), filters);
 
@@ -261,7 +261,7 @@ export namespace DatePicker {
                   @keydown=${(event: KeyboardEvent) => this.handleInputKeyDown(event)}
                   @input-change="${(e: CustomEvent) => this.handleDateInputChange(e)}"
                   ?disabled=${this.disabled}
-                  hide-message=${!this.errorMessage && this.isValueValid()}
+                  ?hide-message=${!this.errorMessage && this.isValueValid()}
                   ariaInvalid=${!!this.errorMessage || !this.isValueValid()}
                   .messageArr=${this.errorMessage
                     ? [{ message: this.errorMessage, type: "error" }]

web-components/src/components/input/Input.test.ts

@@ -344,4 +344,50 @@ describe("Input Component", () => {
     const rightTemplate = element.shadowRoot!.querySelector(".md-input__after")?.querySelector("md-button");
     expect(rightTemplate).toBeNull();
   });
+
+  test("Should propogate tab key event", async () => {
+    //Test case to ensure issue where the clear button became a focus trap does not reoccur
+    const el = await fixture(html` <md-input clear value="test value"></md-input> `);
+
+    const input = el.shadowRoot!.querySelector("input") as HTMLInputElement;
+    const clearButton = el.shadowRoot!.querySelector(".md-input__icon-clear") as HTMLElement;
+
+    // Focus the input and then the clear button
+    input.focus();
+    clearButton.focus();
+
+    // Simulate Tab key press
+    const tabEvent = new KeyboardEvent("keydown", {
+      key: "Tab",
+      bubbles: true,
+      cancelable: true
+    });
+    clearButton.dispatchEvent(tabEvent);
+
+    // Check if the event was propagated and focus moved to the next element
+    expect(document.activeElement).not.toBe(clearButton);
+  });
+
+  test("Clicking clear button should not propogate", async () => {
+    //The focus trap bug was caused by not wanting to propogate the click event
+    //Test that this still works
+    const el = await fixture(html` <md-input clear value="test value"></md-input> `);
+
+    const input = el.shadowRoot!.querySelector("input") as HTMLInputElement;
+    const clearButton = el.shadowRoot!.querySelector(".md-input__icon-clear") as HTMLElement;
+
+    // Focus the input and then the clear button
+    input.focus();
+    clearButton.focus();
+
+    // Simulate Click event
+    const clickEvent = new MouseEvent("click", {
+      bubbles: true,
+      cancelable: true
+    });
+    clearButton.dispatchEvent(clickEvent);
+
+    // Check if the event was propagated and focus moved to the next element
+    expect(document.activeElement).not.toBe(clearButton);
+  });
 });

web-components/src/components/input/Input.ts

@@ -293,14 +293,21 @@ export namespace Input {
     }
 
     handleClear(event: MouseEvent | KeyboardEvent) {
-      event.preventDefault();
-      event.stopPropagation();
       if (event.type === "keydown") {
         const { code } = event as KeyboardEvent;
         if (code !== Key.Space && code !== Key.Enter) {
           return;
         }
+
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (event.type === "click") {
+        //When handling the click clear button do not propagate the event to the parent
+        //As this will close overlay menus that we do not want to close
+        event.preventDefault();
+        event.stopPropagation();
       }
+
       this.input.focus();
       this.dispatchEvent(
         new CustomEvent("input-clear", {

web-components/src/components/menu-overlay/MenuOverlay.ts

@@ -167,7 +167,7 @@ export namespace MenuOverlay {
     }
 
     checkIsInputField(element: HTMLElement) {
-      if (element && element.tagName && element.tagName.toLowerCase() === "md-input") {
+      if (element?.tagName?.toLowerCase() === "md-input") {
         return true;
       }
       return false;

web-components/src/components/modal/scss/modal.scss

@@ -31,7 +31,7 @@
 
     h2 {
       font-size: inherit;
-      font-weight: inherit;
+      font-weight: var(--brand-font-weight-bold, inherit);
       line-height: inherit;
       margin: 0;
     }