Fix code review issues: proper size mapping and document DOM manipulation workaround

Co-authored-by: HenriqueLimas <2222191+HenriqueLimas@users.noreply.github.com>

Author: Copilot

packages/ebayui-core-react/src/ebay-filter-input/filter-input.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import classnames from "classnames";
-import React, { ComponentProps, FC } from "react";
+import React, { ComponentProps, FC, useRef } from "react";
 import { EbayTextbox, EbayTextboxPrefixIcon, EbayTextboxPostfixIcon } from "../ebay-textbox";
 import { EbayIconSearch16 } from "../ebay-icon/icons/ebay-icon-search-16";
 import { EbayIconClear16 } from "../ebay-icon/icons/ebay-icon-clear-16";
@@ -59,25 +59,33 @@ const EbayFilterInput: FC<EbayFilterInputProps> = ({
     autoFocus,
     tabIndex
 }) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    
+    // Map filter-input sizes to textbox sizes
+    // filter-input "small" -> textbox "default", filter-input "large" -> textbox "large"
+    const textboxSize: TextboxSize | undefined = inputSize && validSizes.includes(inputSize) 
+        ? (inputSize === "small" ? "default" : "large") 
+        : undefined;
 
-    const size = inputSize && validSizes.includes(inputSize) ? inputSize as TextboxSize : undefined;
-
-    const handleClear = (event: any) => {
-        // Find the input element in the DOM (since ref may not be connected properly)
-        const inputElement = (event.target as HTMLElement).closest('.textbox')?.querySelector('input') as HTMLInputElement;
+    const handleButtonClick = (event: any) => {
+        // Note: This uses DOM manipulation as a workaround because the textbox component
+        // manages its own internal state and doesn't expose a proper clear API.
+        // This is not ideal React code but is necessary for integration with the existing textbox.
+        const inputElement = inputRef.current || 
+                           (event.target as HTMLElement).closest('.textbox')?.querySelector('input') as HTMLInputElement;
 
         if (inputElement) {
-            // Use React's synthetic event to properly trigger input change
+            // Use React's property setter to update the value
             const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
             if (nativeInputValueSetter) {
                 nativeInputValueSetter.call(inputElement, '');
 
-                // Create a proper input event
+                // Dispatch input event to trigger React's onChange handlers
                 const inputEvent = new Event('input', { bubbles: true });
                 inputElement.dispatchEvent(inputEvent);
             }
 
-            // Also trigger our own clear event
+            // Create synthetic event for the clear callback
             const syntheticEvent = {
                 ...event,
                 target: inputElement,
@@ -88,15 +96,18 @@ const EbayFilterInput: FC<EbayFilterInputProps> = ({
         }
     };
 
+
+
     const containerClassName = classnames(
         "filter-input",
-        size && `filter-input--${size}`,
+        inputSize && validSizes.includes(inputSize) && `filter-input--${inputSize}`,
         className
     );
 
     return (
         <span className={containerClassName}>
             <EbayTextbox
+                forwardedRef={inputRef}
                 id={id}
                 name={name}
                 value={value}
@@ -113,21 +124,21 @@ const EbayFilterInput: FC<EbayFilterInputProps> = ({
                 type="search"
                 aria-controls={a11yControlsId}
                 placeholder={placeholder}
-                inputSize={size}
+                inputSize={textboxSize}
                 onKeyDown={onKeyDown}
                 onKeyPress={onKeyPress}
                 onKeyUp={onKeyUp}
                 onChange={onChange}
                 onInputChange={onInputChange}
                 onFocus={onFocus}
                 onBlur={onBlur}
+                onButtonClick={a11yClearButton ? handleButtonClick : undefined}
             >
                 <EbayTextboxPrefixIcon icon={<EbayIconSearch16 />} />
                 {a11yClearButton && (
                     <EbayTextboxPostfixIcon
                         icon={<EbayIconClear16 />}
                         buttonAriaLabel={a11yClearButton}
-                        onClick={handleClear}
                         className="filter-input__clear-btn"
                     />
                 )}