src/lib/form/adapters/antd/antd-auto-complete-adapter.ts

Total Symbols
3
Lines of Code
73
Avg Complexity
2.0
Avg Coverage
100.0%

Symbols by Kind

method 3

All Symbols

Name Kind Visibility Status Lines Signature
matches method - 33-38 matches(el: HTMLElement): : boolean
buildField method - 40-59 buildField(wrapper: HTMLElement): : FormField
fill method - 61-71 fill(wrapper: HTMLElement, value: string): : boolean

Full Source

/**
 * Ant Design AutoComplete Adapter
 *
 * Detects and fills `<AutoComplete>` components.
 *
 * DOM structure (antd v5):
 *   <div class="ant-select ant-select-auto-complete ...">
 *     <div class="ant-select-selector">
 *       <span class="ant-select-selection-search">
 *         <input role="combobox" class="ant-select-selection-search-input" ... />
 *       </span>
 *     </div>
 *   </div>
 *
 * Filling: Types into the input using React-compatible events.
 */

import type { FormField } from "@/types";
import type { CustomComponentAdapter } from "../adapter.interface";
import {
  findAntLabel,
  findAntId,
  isAntRequired,
  setReactInputValue,
  getAntdSelector,
} from "./antd-utils";
import { buildSignals } from "../../extractors";

export const antdAutoCompleteAdapter: CustomComponentAdapter = {
  name: "antd-auto-complete",
  selector: ".ant-select-auto-complete:not(.ant-select-disabled)",

  matches(el: HTMLElement): boolean {
    return (
      el.classList.contains("ant-select-auto-complete") &&
      !el.classList.contains("ant-select-disabled")
    );
  },

  buildField(wrapper: HTMLElement): FormField {
    const input = wrapper.querySelector<HTMLInputElement>(
      ".ant-select-selection-search-input",
    );

    const field: FormField = {
      element: wrapper,
      selector: getAntdSelector(wrapper),
      category: "unknown",
      fieldType: "unknown",
      adapterName: "antd-auto-complete",
      label: findAntLabel(wrapper),
      id: findAntId(wrapper),
      required: isAntRequired(wrapper),
      placeholder: input?.placeholder || undefined,
    };

    field.contextSignals = buildSignals(field);
    return field;
  },

  fill(wrapper: HTMLElement, value: string): boolean {
    const input = wrapper.querySelector<HTMLInputElement>(
      ".ant-select-selection-search-input",
    );
    if (!input) return false;

    input.focus();
    setReactInputValue(input, value);

    return true;
  },
};