Refactor to use React state management instead of DOM manipulation

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, { FC, useRef } from "react";
+import React, { FC, useRef, useState } from "react";
 import { EbayTextbox, EbayTextboxPrefixIcon, EbayTextboxPostfixIcon, type EbayTextboxProps } from "../ebay-textbox";
 import { EbayIconSearch16 } from "../ebay-icon/icons/ebay-icon-search-16";
 import { EbayIconClear16 } from "../ebay-icon/icons/ebay-icon-clear-16";
@@ -26,42 +26,61 @@ const EbayFilterInput: FC<EbayFilterInputProps> = ({
     onClear = () => {},
     className,
     placeholder = "Filter",
+    value: controlledValue,
+    defaultValue,
+    onInputChange,
     ...rest
 }) => {
     const inputRef = useRef<HTMLInputElement>(null);
+    const isControlled = controlledValue !== undefined;
+    
+    // Always manage internal state, even in controlled mode (for clear functionality)
+    const [internalValue, setInternalValue] = useState(defaultValue || "");
+    
+    // Use controlled value if provided, otherwise use internal state
+    const value = isControlled ? controlledValue : internalValue;
 
     // 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 handleInputChange: EbayChangeEventHandler<HTMLInputElement, { value: string }> = (event, { value: newValue }) => {
+        // Always update internal state for uncontrolled mode
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        
+        // Call parent's onInputChange if provided
+        if (onInputChange) {
+            onInputChange(event, { value: newValue });
+        }
+    };
+
     const handleButtonClick = (event: any) => {
-        // Get the input element - either from ref or by finding it in the DOM
-        const inputElement = inputRef.current || 
-                           (event.target as HTMLElement).closest('.textbox')?.querySelector('input') as HTMLInputElement;
+        // Get the input element from the event target
+        const inputElement = (event.target as HTMLElement).closest('.textbox')?.querySelector('input') as HTMLInputElement;
 
-        if (inputElement) {
-            // Use React's property setter to update the value properly
-            const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set;
-            if (nativeInputValueSetter) {
-                nativeInputValueSetter.call(inputElement, '');
-                
-                // Dispatch input event to trigger React's onChange handlers
-                // This works for both controlled and uncontrolled components
-                const inputEvent = new Event('input', { bubbles: true });
-                inputElement.dispatchEvent(inputEvent);
-            }
-            
-            // Create synthetic event for the clear callback
-            const syntheticEvent = {
-                ...event,
-                target: inputElement,
-                currentTarget: inputElement,
-            } as unknown as React.ChangeEvent<HTMLInputElement>;
+        // Create synthetic event for the clear action
+        const syntheticEvent = {
+            ...event,
+            target: inputElement || inputRef.current,
+            currentTarget: inputElement || inputRef.current,
+        } as unknown as React.ChangeEvent<HTMLInputElement>;
 
-            onClear(syntheticEvent, { value: "" });
+        // Update internal state for uncontrolled mode
+        if (!isControlled) {
+            setInternalValue("");
         }
+        
+        // Call onInputChange to notify parent of the change
+        if (onInputChange) {
+            onInputChange(syntheticEvent, { value: "" });
+        }
+        
+        // Call onClear callback
+        onClear(syntheticEvent, { value: "" });
     };
 
     const containerClassName = classnames(
@@ -75,6 +94,8 @@ const EbayFilterInput: FC<EbayFilterInputProps> = ({
             <EbayTextbox
                 {...rest}
                 forwardedRef={inputRef}
+                value={value}
+                onInputChange={handleInputChange}
                 fluid
                 type="search"
                 aria-controls={a11yControlsId}