feat(filter-menu): allow search value override

Author: LuLaValva

src/components/ebay-filter-menu-button/component.ts

@@ -34,8 +34,9 @@ interface FilterMenuButtonInput
     "form-method"?: string;
     disabled?: boolean;
     "a11y-text"?: AttrString;
-    "search-header-placeholder-text"?: string;
-    "a11y-search-header-clear-text"?: string;
+    "search-header-value"?: string;
+    "search-header-placeholder-text"?: AttrString;
+    "a11y-search-header-clear-text"?: AttrString;
     "on-expand"?: () => void;
     "on-change"?: (event: FilterMenuButtonEvent) => void;
     "on-collapse"?: (event: FilterMenuButtonEvent) => void;

src/components/ebay-filter-menu-button/filter-menu-button.stories.ts

@@ -68,6 +68,11 @@ export default {
                 category: "@attribute tags",
             },
         },
+        searchHeaderValue: {
+            control: { type: "text" },
+            description:
+                "optional value override for the input in the search header",
+        },
         searchHeaderPlaceholderText: {
             control: { type: "text" },
             description:

src/components/ebay-filter-menu-button/index.marko

@@ -13,6 +13,7 @@ $ const {
     formAction,
     formMethod,
     items,
+    searchHeaderValue,
     searchHeaderPlaceholderText,
     a11ySearchHeaderClearText,
     type: inputType,
@@ -48,6 +49,7 @@ $ const {
         formMethod=formMethod
         footerText=footerText
         a11yFooterText=a11yFooterText
+        searchHeaderValue=searchHeaderValue
         searchHeaderPlaceholderText=searchHeaderPlaceholderText
         a11ySearchHeaderClearText=a11ySearchHeaderClearText
         on-keydown("handleMenuKeydown")

src/components/ebay-filter-menu/component.ts

@@ -34,8 +34,9 @@ interface FilterMenuInput
             "a11y-footer-text"?: AttrString;
         }
     >;
-    "search-header-placeholder-text"?: string;
-    "a11y-search-header-clear-text"?: string;
+    "search-header-value"?: string;
+    "search-header-placeholder-text"?: AttrString;
+    "a11y-search-header-clear-text"?: AttrString;
     "render-body"?: Marko.Body;
     "on-footer-click"?: (event: FilterMenuEvent) => void;
     "on-form-submit"?: (event: FilterMenuEvent) => void;
@@ -121,7 +122,12 @@ export default class extends MenuUtils<Input, State> {
     onInput(input: Input) {
         this.state = {
             ...super.getInputState(input),
-            searchTerm: this.state ? this.state.searchTerm : "",
+            searchTerm:
+                input.searchHeaderValue !== undefined
+                    ? input.searchHeaderValue
+                    : this.state
+                      ? this.state.searchTerm
+                      : "",
         };
     }
 

src/components/ebay-filter-menu/filter-menu.stories.ts

@@ -52,6 +52,11 @@ export default {
             control: { type: "text" },
             description: "forms `method` attribute",
         },
+        searchHeaderValue: {
+            control: { type: "text" },
+            description:
+                "optional value override for the input in the search header",
+        },
         searchHeaderPlaceholderText: {
             control: { type: "text" },
             description: