@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/SearchField.tsx

@@ -9,21 +9,28 @@ import {
   type JSX,
   createContext,
   createMemo,
+  onCleanup,
+  onMount,
   splitProps,
   useContext,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createSearchField,
   createFocusRing,
   createHover,
   createPress,
+  mergeProps,
   type AriaSearchFieldProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createSearchFieldState,
+  VALID_VALIDITY_STATE,
   type SearchFieldState,
-} from '@proyecto-viviana/solid-stately';
+  type ValidationResult,
+} from "@proyecto-viviana/solid-stately";
+import { FormContext, type FormProps } from "./Form";
+import { FieldErrorContext, type FieldErrorContextValue } from "./FieldError";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -31,11 +38,7 @@ import {
   type SlotProps,
   useRenderProps,
   filterDOMProps,
-} from './utils';
-
-// ============================================
-// TYPES
-// ============================================
+} from "./utils";
 
 export interface SearchFieldRenderProps {
   /** Whether the search field is empty. */
@@ -52,7 +55,7 @@ export interface SearchFieldRenderProps {
   value: string;
 }
 
-export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label'>, SlotProps {
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, "label">, SlotProps {
   /** The current value (controlled). */
   value?: string;
   /** The default value (uncontrolled). */
@@ -71,6 +74,8 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label'>, S
   class?: ClassNameOrFunction<SearchFieldRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<SearchFieldRenderProps>;
+  /** Ref for the outer search field element. */
+  ref?: (el: HTMLDivElement) => void;
 }
 
 export interface SearchFieldInputRenderProps {
@@ -86,7 +91,8 @@ export interface SearchFieldInputRenderProps {
   isInvalid: boolean;
 }
 
-export interface SearchFieldInputProps extends SlotProps {
+export interface SearchFieldInputProps
+  extends SlotProps, Omit<JSX.InputHTMLAttributes<HTMLInputElement>, "class" | "style"> {
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<SearchFieldInputRenderProps>;
   /** The inline style for the element. */
@@ -102,7 +108,10 @@ export interface SearchFieldClearButtonRenderProps {
   isDisabled: boolean;
 }
 
-export interface SearchFieldClearButtonProps extends SlotProps {
+export interface SearchFieldClearButtonProps
+  extends
+    SlotProps,
+    Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "class" | "style" | "children"> {
   /** The children of the button. */
   children?: RenderChildren<SearchFieldClearButtonRenderProps>;
   /** The CSS className for the element. */
@@ -111,49 +120,181 @@ export interface SearchFieldClearButtonProps extends SlotProps {
   style?: StyleOrFunction<SearchFieldClearButtonRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
-interface SearchFieldContextValue {
-  state: SearchFieldState;
-  inputProps: JSX.InputHTMLAttributes<HTMLInputElement>;
-  clearButtonProps: {
-    'aria-label': string;
+interface SearchFieldContextValue extends Partial<SearchFieldProps> {
+  state?: SearchFieldState;
+  inputProps?: JSX.InputHTMLAttributes<HTMLInputElement>;
+  clearButtonProps?: {
+    "aria-label": string;
     tabIndex: number;
     disabled?: boolean;
     onMouseDown: (e: MouseEvent) => void;
     onClick: () => void;
   };
-  labelProps: JSX.HTMLAttributes<HTMLElement>;
-  descriptionProps: JSX.HTMLAttributes<HTMLElement>;
-  errorMessageProps: JSX.HTMLAttributes<HTMLElement>;
-  isDisabled: boolean;
-  isInvalid: boolean;
-  isRequired: boolean;
-  isReadOnly: boolean;
-  inputRef: HTMLInputElement | undefined;
-  setInputRef: (el: HTMLInputElement) => void;
+  labelProps?: JSX.HTMLAttributes<HTMLElement>;
+  descriptionProps?: JSX.HTMLAttributes<HTMLElement>;
+  errorMessageProps?: JSX.HTMLAttributes<HTMLElement>;
+  isDisabled?: boolean;
+  isInvalid?: boolean;
+  isRequired?: boolean;
+  isReadOnly?: boolean;
+  setInputRef?: (el: HTMLInputElement) => void;
+  slots?: Record<string, SearchFieldProps>;
 }
 
 export const SearchFieldContext = createContext<SearchFieldContextValue | null>(null);
 
-// ============================================
-// COMPONENTS
-// ============================================
+function withFormValidationBehavior(
+  props: SearchFieldProps,
+  formContext: FormProps | null,
+): SearchFieldProps {
+  if (!formContext?.validationBehavior) {
+    return props;
+  }
+
+  return new Proxy(props, {
+    get(target, property, receiver) {
+      const localValue = Reflect.get(target, property, receiver);
+      if (property === "validationBehavior" && localValue === undefined) {
+        return formContext.validationBehavior;
+      }
+
+      return localValue;
+    },
+    has(target, property) {
+      return (
+        Reflect.has(target, property) ||
+        (property === "validationBehavior" && formContext.validationBehavior !== undefined)
+      );
+    },
+    ownKeys(target) {
+      const keys = new Set(Reflect.ownKeys(target));
+      if (formContext.validationBehavior !== undefined) {
+        keys.add("validationBehavior");
+      }
+
+      return Array.from(keys);
+    },
+    getOwnPropertyDescriptor(target, property) {
+      const descriptor = Reflect.getOwnPropertyDescriptor(target, property);
+      if (descriptor) {
+        return descriptor;
+      }
+
+      if (property === "validationBehavior" && formContext.validationBehavior !== undefined) {
+        return {
+          enumerable: true,
+          configurable: true,
+          get: () => formContext.validationBehavior,
+        };
+      }
+
+      return undefined;
+    },
+  });
+}
+
+function eventWithCurrentTarget<T extends HTMLElement>(event: Event, element: T): Event {
+  return new Proxy(event, {
+    get(target, property, receiver) {
+      if (property === "target" || property === "currentTarget") {
+        return element;
+      }
+
+      const value = Reflect.get(target, property, receiver);
+      return typeof value === "function" ? value.bind(target) : value;
+    },
+  });
+}
+
+function clearDelegatedTextEntryHandlers(element: HTMLElement) {
+  const delegatedElement = element as HTMLElement & {
+    $$input?: unknown;
+    $$change?: unknown;
+  };
+  delete delegatedElement.$$input;
+  delete delegatedElement.$$change;
+}
 
 /**
  * A search field allows a user to enter and clear a search query.
  */
 export function SearchField(props: SearchFieldProps): JSX.Element {
+  const formContext = useContext(FormContext);
+  const contextProps = useContext(SearchFieldContext);
+  const contextSlotProps = contextProps?.slots?.[props.slot ?? "default"];
+  const contextBaseProps = createMemo<SearchFieldProps>(() => {
+    if (!contextProps) return {};
+    const {
+      state: _state,
+      inputProps: _inputProps,
+      clearButtonProps: _clearButtonProps,
+      labelProps: _labelProps,
+      descriptionProps: _descriptionProps,
+      errorMessageProps: _errorMessageProps,
+      isDisabled: _isDisabled,
+      isInvalid: _isInvalid,
+      isRequired: _isRequired,
+      isReadOnly: _isReadOnly,
+      setInputRef: _setInputRef,
+      slots: _slots,
+      ...restContextProps
+    } = contextProps;
+    return restContextProps as SearchFieldProps;
+  });
+  const baseProps = (
+    contextProps ? mergeProps(contextBaseProps(), contextSlotProps ?? {}, props) : props
+  ) as SearchFieldProps;
+  const mergedProps = withFormValidationBehavior(baseProps, formContext);
+
   const [local, stateProps, ariaProps, rest] = splitProps(
-    props,
-    ['children', 'class', 'style', 'slot'],
-    ['value', 'defaultValue', 'onChange', 'onSubmit', 'onClear'],
-    ['label', 'aria-label', 'aria-labelledby', 'aria-describedby', 'isDisabled', 'isReadOnly', 'isRequired', 'isInvalid', 'description', 'errorMessage', 'id', 'autoFocus', 'name', 'placeholder', 'autoComplete', 'maxLength', 'minLength', 'pattern']
+    mergedProps,
+    ["children", "class", "style", "slot", "ref"],
+    ["value", "defaultValue", "onChange", "onSubmit", "onClear"],
+    [
+      "label",
+      "aria-label",
+      "aria-labelledby",
+      "aria-describedby",
+      "isDisabled",
+      "isReadOnly",
+      "isRequired",
+      "isInvalid",
+      "description",
+      "errorMessage",
+      "id",
+      "autoFocus",
+      "excludeFromTabOrder",
+      "name",
+      "form",
+      "validationBehavior",
+      "type",
+      "placeholder",
+      "autoComplete",
+      "inputMode",
+      "enterKeyHint",
+      "autoCorrect",
+      "autoCapitalize",
+      "spellCheck",
+      "maxLength",
+      "minLength",
+      "pattern",
+      "onFocus",
+      "onBlur",
+      "onFocusChange",
+      "onKeyDown",
+      "onKeyUp",
+      "onCopy",
+      "onCut",
+      "onPaste",
+      "onCompositionStart",
+      "onCompositionEnd",
+      "onCompositionUpdate",
+      "onSelect",
+      "onBeforeInput",
+      "onInput",
+    ],
   );
 
-  // Create search field state
   const state = createSearchFieldState({
     get value() {
       return stateProps.value;
@@ -166,20 +307,12 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
     },
   });
 
-  // Ref for the input
   let inputRef: HTMLInputElement | undefined;
   const setInputRef = (el: HTMLInputElement) => {
     inputRef = el;
   };
 
-  // Create search field aria props
-  const {
-    labelProps,
-    inputProps,
-    clearButtonProps,
-    descriptionProps,
-    errorMessageProps,
-  } = createSearchField(
+  const searchFieldAria = createSearchField(
     {
       get isDisabled() {
         return ariaProps.isDisabled;
@@ -196,14 +329,14 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
       get label() {
         return ariaProps.label;
       },
-      get 'aria-label'() {
-        return ariaProps['aria-label'];
+      get "aria-label"() {
+        return ariaProps["aria-label"];
       },
-      get 'aria-labelledby'() {
-        return ariaProps['aria-labelledby'];
+      get "aria-labelledby"() {
+        return ariaProps["aria-labelledby"];
       },
-      get 'aria-describedby'() {
-        return ariaProps['aria-describedby'];
+      get "aria-describedby"() {
+        return ariaProps["aria-describedby"];
       },
       get description() {
         return ariaProps.description;
@@ -217,12 +350,39 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
       get name() {
         return ariaProps.name;
       },
+      get form() {
+        return ariaProps.form;
+      },
+      get validationBehavior() {
+        return ariaProps.validationBehavior;
+      },
+      get type() {
+        return ariaProps.type;
+      },
       get autoFocus() {
         return ariaProps.autoFocus;
       },
+      get excludeFromTabOrder() {
+        return ariaProps.excludeFromTabOrder;
+      },
       get autoComplete() {
         return ariaProps.autoComplete;
       },
+      get inputMode() {
+        return ariaProps.inputMode;
+      },
+      get enterKeyHint() {
+        return ariaProps.enterKeyHint;
+      },
+      get autoCorrect() {
+        return ariaProps.autoCorrect;
+      },
+      get autoCapitalize() {
+        return ariaProps.autoCapitalize;
+      },
+      get spellCheck() {
+        return ariaProps.spellCheck;
+      },
       get maxLength() {
         return ariaProps.maxLength;
       },
@@ -232,6 +392,48 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
       get pattern() {
         return ariaProps.pattern;
       },
+      get onFocus() {
+        return ariaProps.onFocus;
+      },
+      get onBlur() {
+        return ariaProps.onBlur;
+      },
+      get onFocusChange() {
+        return ariaProps.onFocusChange;
+      },
+      get onKeyDown() {
+        return ariaProps.onKeyDown;
+      },
+      get onKeyUp() {
+        return ariaProps.onKeyUp;
+      },
+      get onCopy() {
+        return ariaProps.onCopy;
+      },
+      get onCut() {
+        return ariaProps.onCut;
+      },
+      get onPaste() {
+        return ariaProps.onPaste;
+      },
+      get onCompositionStart() {
+        return ariaProps.onCompositionStart;
+      },
+      get onCompositionEnd() {
+        return ariaProps.onCompositionEnd;
+      },
+      get onCompositionUpdate() {
+        return ariaProps.onCompositionUpdate;
+      },
+      get onSelect() {
+        return ariaProps.onSelect;
+      },
+      get onBeforeInput() {
+        return ariaProps.onBeforeInput;
+      },
+      get onInput() {
+        return ariaProps.onInput;
+      },
       get onSubmit() {
         return stateProps.onSubmit;
       },
@@ -240,83 +442,156 @@ export function SearchField(props: SearchFieldProps): JSX.Element {
       },
     },
     state,
-    () => inputRef ?? null
+    () => inputRef ?? null,
   );
 
-  // Render props values
   const renderValues = createMemo<SearchFieldRenderProps>(() => ({
-    isEmpty: state.value() === '',
+    isEmpty: state.value() === "",
     isDisabled: ariaProps.isDisabled ?? false,
-    isInvalid: ariaProps.isInvalid ?? false,
+    isInvalid: searchFieldAria.isInvalid ?? false,
     isRequired: ariaProps.isRequired ?? false,
     isReadOnly: ariaProps.isReadOnly ?? false,
     value: state.value(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      children: local.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-SearchField',
+      defaultClassName: "solidaria-SearchField",
     },
-    renderValues
+    renderValues,
   );
+  const childRenderValues: SearchFieldRenderProps = {
+    get isEmpty() {
+      return state.value() === "";
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get isInvalid() {
+      return searchFieldAria.isInvalid ?? false;
+    },
+    get isRequired() {
+      return ariaProps.isRequired ?? false;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly ?? false;
+    },
+    get value() {
+      return state.value();
+    },
+  };
 
-  // Filter DOM props
-  const domProps = createMemo(() => filterDOMProps(rest as Record<string, unknown>, { global: true }));
+  const domProps = createMemo(() =>
+    filterDOMProps(rest as Record<string, unknown>, { global: true }),
+  );
+
+  const fieldValidation = createMemo<ValidationResult>(() => {
+    const isInvalid = searchFieldAria.isInvalid;
+    const errorMessage = ariaProps.errorMessage;
+    const validationErrors = isInvalid && typeof errorMessage === "string" ? [errorMessage] : [];
+
+    return {
+      isInvalid,
+      validationErrors,
+      validationDetails: isInvalid
+        ? { ...VALID_VALIDITY_STATE, customError: true, valid: false }
+        : VALID_VALIDITY_STATE,
+    };
+  });
+  const fieldErrorContext: FieldErrorContextValue = {
+    get validation() {
+      return fieldValidation();
+    },
+    get errorMessageProps() {
+      return searchFieldAria.errorMessageProps;
+    },
+  };
+  const contextValue: SearchFieldContextValue = {
+    state,
+    get inputProps() {
+      return searchFieldAria.inputProps;
+    },
+    get clearButtonProps() {
+      return searchFieldAria.clearButtonProps;
+    },
+    get labelProps() {
+      return searchFieldAria.labelProps as JSX.HTMLAttributes<HTMLElement>;
+    },
+    get descriptionProps() {
+      return searchFieldAria.descriptionProps;
+    },
+    get errorMessageProps() {
+      return searchFieldAria.errorMessageProps;
+    },
+    get isDisabled() {
+      return ariaProps.isDisabled ?? false;
+    },
+    get isInvalid() {
+      return searchFieldAria.isInvalid ?? false;
+    },
+    get isRequired() {
+      return ariaProps.isRequired ?? false;
+    },
+    get isReadOnly() {
+      return ariaProps.isReadOnly ?? false;
+    },
+    setInputRef,
+  };
+  const fieldChildren = () => {
+    const children = local.children;
+    return typeof children === "function" ? children(childRenderValues) : children;
+  };
 
   return (
-    <SearchFieldContext.Provider
-      value={{
-        state,
-        inputProps,
-        clearButtonProps,
-        labelProps: labelProps as JSX.HTMLAttributes<HTMLElement>,
-        descriptionProps,
-        errorMessageProps,
-        isDisabled: ariaProps.isDisabled ?? false,
-        isInvalid: ariaProps.isInvalid ?? false,
-        isRequired: ariaProps.isRequired ?? false,
-        isReadOnly: ariaProps.isReadOnly ?? false,
-        inputRef,
-        setInputRef,
-      }}
-    >
-      <div
-        {...domProps()}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-empty={state.value() === '' || undefined}
-        data-disabled={ariaProps.isDisabled || undefined}
-        data-invalid={ariaProps.isInvalid || undefined}
-        data-required={ariaProps.isRequired || undefined}
-        data-readonly={ariaProps.isReadOnly || undefined}
-      >
-        {renderProps.renderChildren()}
-      </div>
-    </SearchFieldContext.Provider>
+    <FieldErrorContext.Provider value={fieldErrorContext}>
+      <SearchFieldContext.Provider value={contextValue}>
+        <div
+          {...domProps()}
+          ref={local.ref}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-empty={state.value() === "" || undefined}
+          data-disabled={ariaProps.isDisabled || undefined}
+          data-invalid={searchFieldAria.isInvalid || undefined}
+          data-required={ariaProps.isRequired || undefined}
+          data-readonly={ariaProps.isReadOnly || undefined}
+        >
+          {fieldChildren()}
+        </div>
+      </SearchFieldContext.Provider>
+    </FieldErrorContext.Provider>
   );
 }
 
 /**
  * The label for a search field.
  */
-export function SearchFieldLabel(props: { children?: JSX.Element; class?: string; style?: JSX.CSSProperties }): JSX.Element {
+export function SearchFieldLabel(props: {
+  children?: JSX.Element;
+  class?: string;
+  style?: JSX.CSSProperties;
+}): JSX.Element {
   const context = useContext(SearchFieldContext);
   if (!context) {
-    throw new Error('SearchFieldLabel must be used within a SearchField');
+    throw new Error("SearchFieldLabel must be used within a SearchField");
   }
 
+  const cleanLabelProps = () => {
+    const { ref: _ref, ...rest } = context.labelProps as Record<string, unknown>;
+    return rest;
+  };
+
   return (
-    <span
-      {...context.labelProps}
-      class={props.class ?? 'solidaria-SearchField-label'}
+    <label
+      {...cleanLabelProps()}
+      class={props.class ?? "solidaria-SearchField-label"}
       style={props.style}
     >
       {props.children}
-    </span>
+    </label>
   );
 }
 
@@ -324,43 +599,39 @@ export function SearchFieldLabel(props: { children?: JSX.Element; class?: string
  * The input element for a search field.
  */
 export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot"]);
+  let inputElement: HTMLInputElement | undefined;
 
   const context = useContext(SearchFieldContext);
   if (!context) {
-    throw new Error('SearchFieldInput must be used within a SearchField');
+    throw new Error("SearchFieldInput must be used within a SearchField");
   }
 
-  // Create focus ring
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return context.isDisabled;
     },
   });
 
-  // Render props values
   const renderValues = createMemo<SearchFieldInputRenderProps>(() => ({
     isFocused: isFocused(),
     isFocusVisible: isFocusVisible(),
     isHovered: isHovered(),
-    isDisabled: context.isDisabled,
-    isInvalid: context.isInvalid,
+    isDisabled: !!context.isDisabled,
+    isInvalid: !!context.isInvalid,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-SearchField-input',
+      defaultClassName: "solidaria-SearchField-input",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanInputProps = () => {
     const { ref: _ref, ...rest } = context.inputProps as Record<string, unknown>;
     return rest;
@@ -374,12 +645,67 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
     return rest;
   };
 
+  const mergedInputProps = () =>
+    ({
+      ...domProps,
+      ...cleanInputProps(),
+      ...cleanFocusProps(),
+      ...cleanHoverProps(),
+    }) as Record<string, unknown>;
+
+  onMount(() => {
+    const element = inputElement;
+    if (!element) {
+      return;
+    }
+
+    const inputHandler = (event: Event) => {
+      const handler = mergedInputProps().onInput as
+        | JSX.EventHandler<HTMLInputElement, InputEvent>
+        | undefined;
+      handler?.(
+        eventWithCurrentTarget(event, element) as InputEvent & {
+          currentTarget: HTMLInputElement;
+          target: Element;
+        },
+      );
+      clearDelegatedTextEntryHandlers(element);
+      event.stopPropagation();
+    };
+    const changeHandler = (event: Event) => {
+      const handler = mergedInputProps().onChange as
+        | JSX.EventHandler<HTMLInputElement, Event>
+        | undefined;
+      handler?.(
+        eventWithCurrentTarget(event, element) as Event & {
+          currentTarget: HTMLInputElement;
+          target: Element;
+        },
+      );
+      clearDelegatedTextEntryHandlers(element);
+      event.stopPropagation();
+    };
+
+    element.addEventListener("input", inputHandler);
+    element.addEventListener("change", changeHandler);
+    clearDelegatedTextEntryHandlers(element);
+    onCleanup(() => {
+      element.removeEventListener("input", inputHandler);
+      element.removeEventListener("change", changeHandler);
+    });
+  });
+
   return (
     <input
-      ref={context.setInputRef}
-      {...cleanInputProps()}
-      {...cleanFocusProps()}
-      {...cleanHoverProps()}
+      {...mergedInputProps()}
+      ref={(element) => {
+        inputElement = element;
+        context.setInputRef?.(element);
+        const ref = (domProps as { ref?: unknown }).ref;
+        if (typeof ref === "function") {
+          ref(element);
+        }
+      }}
       class={renderProps.class()}
       style={renderProps.style()}
       data-focused={isFocused() || undefined}
@@ -395,52 +721,51 @@ export function SearchFieldInput(props: SearchFieldInputProps): JSX.Element {
  * The clear button for a search field.
  */
 export function SearchFieldClearButton(props: SearchFieldClearButtonProps): JSX.Element {
-  const [local] = splitProps(props, ['class', 'style', 'slot']);
+  const [local, domProps] = splitProps(props, ["class", "style", "slot", "children"]);
 
   const context = useContext(SearchFieldContext);
   if (!context) {
-    throw new Error('SearchFieldClearButton must be used within a SearchField');
+    throw new Error("SearchFieldClearButton must be used within a SearchField");
   }
 
-  // Create press
+  const isDisabled = () => !!(context.isDisabled || context.isReadOnly);
+  const isEmpty = () => (context.state?.value() ?? "") === "";
+  const clear = () => {
+    if (!isDisabled() && !isEmpty()) {
+      context.clearButtonProps?.onClick();
+    }
+  };
+
   const { isPressed, pressProps } = createPress({
     get isDisabled() {
       return context.isDisabled || context.isReadOnly;
     },
-    onPress: () => {
-      context.clearButtonProps.onClick();
-    },
+    onClick: clear,
+    onPress: clear,
   });
 
-  // Create hover
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return context.isDisabled || context.isReadOnly;
     },
   });
 
-  const isDisabled = () => context.isDisabled || context.isReadOnly;
-  const isEmpty = () => context.state.value() === '';
-
-  // Render props values
   const renderValues = createMemo<SearchFieldClearButtonRenderProps>(() => ({
     isPressed: isPressed(),
     isHovered: isHovered(),
     isDisabled: isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-SearchField-clear',
+      defaultClassName: "solidaria-SearchField-clear",
     },
-    renderValues
+    renderValues,
   );
 
-  // Remove ref from spread props
   const cleanPressProps = () => {
     const { ref: _ref, ...rest } = pressProps as Record<string, unknown>;
     return rest;
@@ -450,16 +775,19 @@ export function SearchFieldClearButton(props: SearchFieldClearButtonProps): JSX.
     return rest;
   };
 
-  // Only show clear button when there's a value
   return (
     <Show when={!isEmpty()}>
       <button
+        {...domProps}
         type="button"
-        aria-label={context.clearButtonProps['aria-label']}
-        tabIndex={context.clearButtonProps.tabIndex}
-        disabled={context.clearButtonProps.disabled}
-        onMouseDown={context.clearButtonProps.onMouseDown}
+        aria-label={context.clearButtonProps?.["aria-label"] ?? "Clear search"}
+        tabIndex={context.clearButtonProps?.tabIndex ?? -1}
+        disabled={context.clearButtonProps?.disabled}
+        onMouseDown={context.clearButtonProps?.onMouseDown}
         {...cleanPressProps()}
+        onPointerUp={clear}
+        onMouseUp={clear}
+        onClick={clear}
         {...cleanHoverProps()}
         class={renderProps.class()}
         style={renderProps.style()}
@@ -473,7 +801,6 @@ export function SearchFieldClearButton(props: SearchFieldClearButtonProps): JSX.
   );
 }
 
-// Attach sub-components
 SearchField.Label = SearchFieldLabel;
 SearchField.Input = SearchFieldInput;
 SearchField.ClearButton = SearchFieldClearButton;