Phone field

"use client";

import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
import type { ChangeEvent, ComponentProps, KeyboardEvent, ReactNode } from "react";
import "./phone-field.css";

export type PhoneCountry = {
  /** ISO 3166 code, such as "GB". Countries are told apart by this, since +1 and +7 are shared. */
  code: string;
  name: string;
  /** Country calling code without the plus, such as "44". */
  dial: string;
  /** National digits are dialled with a leading 0 that E.164 drops, as in 07700 900123. */
  trunk?: boolean;
  /** Fewest and most national digits, without the trunk 0. Defaults to 6 and what E.164 leaves. */
  lengths?: [number, number];
  /** Group sizes for display. The last group takes any extra digits. */
  groups?: number[];
};

/* Dial codes and lengths are a light guide for formatting and a first check, not a numbering plan. */
const COUNTRIES: PhoneCountry[] = [
  { code: "AR", name: "Argentina", dial: "54", trunk: true, groups: [2, 4, 4] },
  { code: "AU", name: "Australia", dial: "61", trunk: true, lengths: [9, 9], groups: [3, 3, 3] },
  { code: "AT", name: "Austria", dial: "43", trunk: true, groups: [3, 3, 4] },
  { code: "BD", name: "Bangladesh", dial: "880", trunk: true, groups: [4, 6] },
  { code: "BE", name: "Belgium", dial: "32", trunk: true, lengths: [8, 9], groups: [3, 2, 2, 2] },
  { code: "BR", name: "Brazil", dial: "55", trunk: true, lengths: [10, 11], groups: [2, 5, 4] },
  { code: "BG", name: "Bulgaria", dial: "359", trunk: true, groups: [2, 3, 4] },
  { code: "CA", name: "Canada", dial: "1", lengths: [10, 10], groups: [3, 3, 4] },
  { code: "CL", name: "Chile", dial: "56", lengths: [9, 9], groups: [1, 4, 4] },
  { code: "CN", name: "China", dial: "86", trunk: true, lengths: [10, 11], groups: [3, 4, 4] },
  { code: "CO", name: "Colombia", dial: "57", lengths: [10, 10], groups: [3, 3, 4] },
  { code: "HR", name: "Croatia", dial: "385", trunk: true, groups: [2, 3, 4] },
  { code: "CY", name: "Cyprus", dial: "357", lengths: [8, 8], groups: [2, 6] },
  { code: "CZ", name: "Czechia", dial: "420", lengths: [9, 9], groups: [3, 3, 3] },
  { code: "DK", name: "Denmark", dial: "45", lengths: [8, 8], groups: [2, 2, 2, 2] },
  { code: "EG", name: "Egypt", dial: "20", trunk: true, groups: [3, 3, 4] },
  { code: "EE", name: "Estonia", dial: "372", lengths: [7, 8], groups: [4, 4] },
  { code: "FI", name: "Finland", dial: "358", trunk: true, groups: [2, 3, 4] },
  { code: "FR", name: "France", dial: "33", trunk: true, lengths: [9, 9], groups: [1, 2, 2, 2, 2] },
  { code: "DE", name: "Germany", dial: "49", trunk: true, groups: [3, 4, 4] },
  { code: "GH", name: "Ghana", dial: "233", trunk: true, lengths: [9, 9], groups: [2, 3, 4] },
  { code: "GR", name: "Greece", dial: "30", lengths: [10, 10], groups: [3, 3, 4] },
  { code: "HK", name: "Hong Kong", dial: "852", lengths: [8, 8], groups: [4, 4] },
  { code: "HU", name: "Hungary", dial: "36", groups: [2, 3, 4] },
  { code: "IS", name: "Iceland", dial: "354", lengths: [7, 7], groups: [3, 4] },
  { code: "IN", name: "India", dial: "91", trunk: true, lengths: [10, 10], groups: [5, 5] },
  { code: "ID", name: "Indonesia", dial: "62", trunk: true, groups: [3, 4, 4] },
  { code: "IE", name: "Ireland", dial: "353", trunk: true, groups: [2, 3, 4] },
  { code: "IL", name: "Israel", dial: "972", trunk: true, groups: [2, 3, 4] },
  { code: "IT", name: "Italy", dial: "39", groups: [3, 3, 4] },
  { code: "JP", name: "Japan", dial: "81", trunk: true, lengths: [9, 10], groups: [2, 4, 4] },
  { code: "KZ", name: "Kazakhstan", dial: "7", lengths: [10, 10], groups: [3, 3, 2, 2] },
  { code: "KE", name: "Kenya", dial: "254", trunk: true, lengths: [9, 9], groups: [3, 3, 3] },
  { code: "LV", name: "Latvia", dial: "371", lengths: [8, 8], groups: [2, 3, 3] },
  { code: "LT", name: "Lithuania", dial: "370", lengths: [8, 8], groups: [3, 5] },
  { code: "LU", name: "Luxembourg", dial: "352", groups: [3, 3, 3] },
  { code: "MY", name: "Malaysia", dial: "60", trunk: true, groups: [2, 4, 4] },
  { code: "MT", name: "Malta", dial: "356", lengths: [8, 8], groups: [4, 4] },
  { code: "MX", name: "Mexico", dial: "52", lengths: [10, 10], groups: [2, 4, 4] },
  { code: "MA", name: "Morocco", dial: "212", trunk: true, lengths: [9, 9], groups: [3, 2, 2, 2] },
  { code: "NL", name: "Netherlands", dial: "31", trunk: true, lengths: [9, 9], groups: [1, 4, 4] },
  { code: "NZ", name: "New Zealand", dial: "64", trunk: true, groups: [2, 3, 4] },
  { code: "NG", name: "Nigeria", dial: "234", trunk: true, groups: [3, 3, 4] },
  { code: "NO", name: "Norway", dial: "47", lengths: [8, 8], groups: [3, 2, 3] },
  { code: "PK", name: "Pakistan", dial: "92", trunk: true, lengths: [9, 10], groups: [3, 7] },
  { code: "PE", name: "Peru", dial: "51", lengths: [8, 9], groups: [3, 3, 3] },
  { code: "PH", name: "Philippines", dial: "63", trunk: true, lengths: [9, 10], groups: [3, 3, 4] },
  { code: "PL", name: "Poland", dial: "48", lengths: [9, 9], groups: [3, 3, 3] },
  { code: "PT", name: "Portugal", dial: "351", lengths: [9, 9], groups: [3, 3, 3] },
  { code: "QA", name: "Qatar", dial: "974", lengths: [8, 8], groups: [4, 4] },
  { code: "RO", name: "Romania", dial: "40", trunk: true, lengths: [9, 9], groups: [3, 3, 3] },
  { code: "RU", name: "Russia", dial: "7", lengths: [10, 10], groups: [3, 3, 2, 2] },
  { code: "SA", name: "Saudi Arabia", dial: "966", trunk: true, lengths: [8, 9], groups: [2, 3, 4] },
  { code: "RS", name: "Serbia", dial: "381", trunk: true, groups: [2, 3, 4] },
  { code: "SG", name: "Singapore", dial: "65", lengths: [8, 8], groups: [4, 4] },
  { code: "SK", name: "Slovakia", dial: "421", trunk: true, lengths: [9, 9], groups: [3, 3, 3] },
  { code: "SI", name: "Slovenia", dial: "386", trunk: true, lengths: [8, 8], groups: [2, 3, 3] },
  { code: "ZA", name: "South Africa", dial: "27", trunk: true, lengths: [9, 9], groups: [2, 3, 4] },
  { code: "KR", name: "South Korea", dial: "82", trunk: true, groups: [2, 4, 4] },
  { code: "ES", name: "Spain", dial: "34", lengths: [9, 9], groups: [3, 3, 3] },
  { code: "LK", name: "Sri Lanka", dial: "94", trunk: true, lengths: [9, 9], groups: [2, 3, 4] },
  { code: "SE", name: "Sweden", dial: "46", trunk: true, groups: [2, 3, 2, 2] },
  { code: "CH", name: "Switzerland", dial: "41", trunk: true, lengths: [9, 9], groups: [2, 3, 2, 2] },
  { code: "TW", name: "Taiwan", dial: "886", trunk: true, groups: [3, 3, 3] },
  { code: "TH", name: "Thailand", dial: "66", trunk: true, lengths: [8, 9], groups: [2, 3, 4] },
  { code: "TR", name: "Türkiye", dial: "90", trunk: true, lengths: [10, 10], groups: [3, 3, 2, 2] },
  { code: "UA", name: "Ukraine", dial: "380", trunk: true, lengths: [9, 9], groups: [2, 3, 2, 2] },
  { code: "AE", name: "United Arab Emirates", dial: "971", trunk: true, groups: [2, 3, 4] },
  { code: "GB", name: "United Kingdom", dial: "44", trunk: true, lengths: [9, 10], groups: [4, 6] },
  { code: "US", name: "United States", dial: "1", lengths: [10, 10], groups: [3, 3, 4] },
  { code: "VN", name: "Vietnam", dial: "84", trunk: true, lengths: [9, 10], groups: [3, 3, 4] },
];

/** Which country a shared dial code means when nothing else says: +1 is the United States, +7 Russia. */
const MAIN = ["US", "RU"];

export type PhoneFieldProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  label: ReactNode;
  hint?: ReactNode;
  /** Error text. Replaces the part's own length check message. */
  error?: ReactNode;
  /** Controlled number in E.164, such as "+447700900123". "" while empty. */
  value?: string;
  defaultValue?: string;
  onValueChange?: (value: string) => void;
  /** ISO code of the country picked at first, when the value does not say. */
  defaultCountry?: string;
  /** Limit or replace the built-in list. Pass the codes to keep, or your own countries. */
  countries?: (string | PhoneCountry)[];
  /** Name of a hidden input that carries the E.164 value in a form. */
  name?: string;
  required?: boolean;
  disabled?: boolean;
  placeholder?: string;
};

/** True when there is something to render; false, null and "" count as nothing. */
function present(node: ReactNode): boolean {
  return node != null && node !== false && node !== "";
}

function supportsPopover(el: HTMLElement) {
  return typeof el.showPopover === "function";
}

const digitsOf = (text: string) => text.replace(/\D/g, "");

/** Splits an international number into a country and its national digits, preferring the current country when dial codes are shared. */
function split(international: string, list: PhoneCountry[], prefer?: PhoneCountry): { country: PhoneCountry; national: string } | null {
  const digits = digitsOf(international);
  const fits = list.filter((c) => digits.startsWith(c.dial)).sort((a, b) => b.dial.length - a.dial.length);
  if (fits.length === 0) return null;
  const longest = fits.filter((c) => c.dial === fits[0].dial);
  const country =
    longest.find((c) => c.code === prefer?.code) ?? longest.find((c) => MAIN.includes(c.code)) ?? longest[0];
  return { country, national: digits.slice(country.dial.length) };
}

/** National digits without the trunk 0, the way E.164 writes them. */
function significant(country: PhoneCountry, national: string) {
  return country.trunk && national.startsWith("0") ? national.slice(1) : national;
}

function format(country: PhoneCountry, national: string) {
  const trunk = country.trunk && national.startsWith("0") ? "0" : "";
  const rest = national.slice(trunk.length);
  const groups = country.groups ?? [3, 3, 4];
  const out: string[] = [];
  let at = 0;
  groups.forEach((size, i) => {
    if (at >= rest.length) return;
    const take = i === groups.length - 1 ? rest.length - at : size;
    out.push(rest.slice(at, at + take));
    at += take;
  });
  const grouped = out.join(" ");
  // North American numbers are written (415) 555 0132.
  if (country.dial === "1" && rest.length > 3) return `(${rest.slice(0, 3)}) ${out.slice(1).join(" ")}`;
  return trunk + grouped;
}

/** Caret index just after the nth digit in a formatted string. */
function caretAfter(text: string, digits: number) {
  if (digits <= 0) {
    const first = text.search(/\d/);
    return first === -1 ? text.length : first;
  }
  let seen = 0;
  for (let i = 0; i < text.length; i++) {
    if (/\d/.test(text[i]) && ++seen === digits) return i + 1;
  }
  return text.length;
}

export function PhoneField({
  label,
  hint,
  error,
  value,
  defaultValue = "",
  onValueChange,
  defaultCountry = "GB",
  countries,
  name,
  required,
  disabled,
  placeholder,
  className,
  ...rest
}: PhoneFieldProps) {
  const id = useId();
  const inputId = `${id}-number`;
  const listId = `${id}-countries`;
  const hintId = present(hint) ? `${id}-hint` : undefined;
  const optionId = (index: number) => `${id}-country-${index}`;

  const list: PhoneCountry[] = countries
    ? countries.flatMap((c) => (typeof c === "string" ? COUNTRIES.filter((k) => k.code === c.toUpperCase()) : [c]))
    : COUNTRIES;
  const fallback = list.find((c) => c.code === defaultCountry.toUpperCase()) ?? list[0];

  function initial(e164: string) {
    const found = e164 ? split(e164, list, fallback) : null;
    return found ?? { country: fallback, national: "" };
  }

  const [state, setState] = useState(() => initial(value ?? defaultValue));
  const [synced, setSynced] = useState(value);
  const [touched, setTouched] = useState(false);
  const [open, setOpen] = useState(false);
  /** Read by key handlers, which can run again before a render has caught up with a fast typist. */
  const openRef = useRef(false);
  const setShown = (next: boolean) => {
    openRef.current = next;
    setOpen(next);
  };
  const [query, setQuery] = useState("");
  const [active, setActive] = useState(0);
  /** An international number being typed, shown as typed until its country code is complete. */
  const [draft, setDraft] = useState<string | null>(null);
  const { country, national } = state;
  const max = Math.min(15 - country.dial.length, country.lengths?.[1] ?? 15);
  const nsn = significant(country, national);
  const e164 = nsn ? `+${country.dial}${nsn}` : "";

  if (value !== undefined && value !== synced) {
    setSynced(value);
    if (value !== e164) setState(initial(value));
  }

  const rootRef = useRef<HTMLDivElement>(null);
  const controlRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const inputRef = useRef<HTMLInputElement>(null);
  const popoverRef = useRef<HTMLDivElement>(null);
  const searchRef = useRef<HTMLInputElement>(null);
  /** Digits that should sit before the caret after the next render. */
  const caret = useRef<number | null>(null);

  const needle = query.trim().toLowerCase().replace(/^\+/, "");
  // Names that start with the search come first, then names that contain it, then code matches.
  const rank = (c: PhoneCountry) => {
    const n = c.name.toLowerCase();
    return n.startsWith(needle) ? 0 : n.includes(` ${needle}`) ? 1 : n.includes(needle) ? 2 : c.code.toLowerCase() === needle ? 3 : c.dial.startsWith(needle) ? 4 : 5;
  };
  const matches = needle ? list.filter((c) => rank(c) < 5).sort((a, b) => rank(a) - rank(b)) : list;
  const activeIndex = active < matches.length ? active : matches.length - 1;

  const [min, most] = country.lengths ?? [6, 15 - country.dial.length];
  const problem = !nsn
    ? ""
    : nsn.length < min
      ? `This number is too short for ${country.name}.`
      : nsn.length > most
        ? `This number is too long for ${country.name}.`
        : "";
  const message = error || (touched && problem) || null;
  const errorId = message ? `${id}-error` : undefined;

  useLayoutEffect(() => {
    inputRef.current?.setCustomValidity(problem);
  }, [problem]);

  useLayoutEffect(() => {
    const input = inputRef.current;
    if (caret.current === null || !input || document.activeElement !== input) return;
    const at = caretAfter(input.value, caret.current);
    input.setSelectionRange(at, at);
    caret.current = null;
  });

  function update(next: { country: PhoneCountry; national: string }) {
    setState(next);
    const sig = significant(next.country, next.national);
    const out = sig ? `+${next.country.dial}${sig}` : "";
    if (out !== e164) onValueChange?.(out);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const input = event.target;
    const raw = input.value;
    const before = digitsOf(raw.slice(0, input.selectionStart ?? raw.length)).length;
    // A pasted international number picks its own country.
    if (/^\s*(\+|00)/.test(raw)) {
      const found = split(raw.replace(/^\s*00/, "+"), list, country);
      if (!found) {
        setDraft(raw.slice(0, 8));
        return;
      }
      setDraft(null);
      caret.current = found.national.length;
      update({ country: found.country, national: found.national.slice(0, Math.min(15 - found.country.dial.length, found.country.lengths?.[1] ?? 15) + (found.country.trunk ? 1 : 0)) });
      return;
    }
    setDraft(null);
    const digits = digitsOf(raw);
    const limit = max + (country.trunk && digits.startsWith("0") ? 1 : 0);
    caret.current = Math.min(before, limit);
    update({ country, national: digits.slice(0, limit) });
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    const input = event.currentTarget;
    const start = input.selectionStart ?? 0;
    // Backspace just after a space or bracket deletes the digit before it, rather than a separator that comes straight back.
    if (event.key === "Backspace" && start === input.selectionEnd && start > 0 && /\D/.test(input.value[start - 1])) {
      const before = digitsOf(input.value.slice(0, start)).length;
      if (before === 0) return;
      event.preventDefault();
      caret.current = before - 1;
      update({ country, national: national.slice(0, before - 1) + national.slice(before) });
    }
  }

  function show(seed = "") {
    if (disabled) return;
    setQuery(seed);
    const index = seed ? 0 : list.indexOf(country);
    setActive(Math.max(index, 0));
    setShown(true);
  }

  function hide(refocus: "trigger" | "input" | null) {
    setShown(false);
    if (refocus === "trigger") triggerRef.current?.focus();
    if (refocus === "input") inputRef.current?.focus();
  }

  function pick(next: PhoneCountry) {
    caret.current = null;
    update({ country: next, national: national.slice(0, Math.min(15 - next.dial.length, next.lengths?.[1] ?? 15) + (next.trunk ? 1 : 0)) });
    hide("input");
  }

  useLayoutEffect(() => {
    const popover = popoverRef.current;
    const control = controlRef.current;
    if (!popover || !control) return;
    const native = supportsPopover(popover);
    if (!open) {
      if (native && popover.matches(":popover-open")) popover.hidePopover();
      return;
    }
    if (native && !popover.matches(":popover-open")) popover.showPopover();

    function place() {
      if (!popover || !control) return;
      const rect = control.getBoundingClientRect();
      const width = Math.max(rect.width, 240);
      popover.style.left = `${Math.max(4, Math.min(rect.left, window.innerWidth - width - 4))}px`;
      popover.style.width = `${width}px`;
      const height = popover.offsetHeight;
      const below = rect.bottom + 4;
      const above = below + height > window.innerHeight && rect.top - 4 - height >= 0;
      popover.style.top = `${above ? rect.top - 4 - height : below}px`;
      popover.dataset.side = above ? "top" : "bottom";
    }

    place();
    window.addEventListener("scroll", place, true);
    window.addEventListener("resize", place);
    return () => {
      window.removeEventListener("scroll", place, true);
      window.removeEventListener("resize", place);
    };
  }, [open, matches.length]);

  useEffect(() => {
    if (!open) return;
    searchRef.current?.focus();
    function outside(event: PointerEvent) {
      if (event.target instanceof Node && !rootRef.current?.contains(event.target)) setShown(false);
    }
    document.addEventListener("pointerdown", outside);
    return () => document.removeEventListener("pointerdown", outside);
  }, [open]);

  useEffect(() => {
    if (open) document.getElementById(optionId(activeIndex))?.scrollIntoView({ block: "nearest" });
  });

  // A form reset puts the number back to where it started.
  useEffect(() => {
    const form = inputRef.current?.form;
    if (!form) return;
    function reset() {
      setTouched(false);
      update(initial(defaultValue));
    }
    form.addEventListener("reset", reset);
    return () => form.removeEventListener("reset", reset);
  });

  function handleTriggerKey(event: KeyboardEvent<HTMLButtonElement>) {
    if (openRef.current && (event.key === "Enter" || event.key.startsWith("Arrow") || event.key === "Escape")) {
      // Keys that land before focus has moved into the list still act on it.
      handleSearchKey(event);
    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
      event.preventDefault();
      show();
    } else if (event.key.length === 1 && event.key !== " " && !event.metaKey && !event.ctrlKey && !event.altKey) {
      // Typing on the button starts a search with that letter, or adds to one already open.
      event.preventDefault();
      event.stopPropagation();
      if (openRef.current) {
        setQuery((q) => q + event.key);
        setActive(0);
      } else show(event.key);
    }
  }

  function handleSearchKey(event: KeyboardEvent<HTMLElement>) {
    if (event.nativeEvent.isComposing) return;
    const count = matches.length;
    switch (event.key) {
      case "ArrowDown":
        event.preventDefault();
        if (count) setActive((activeIndex + 1) % count);
        return;
      case "ArrowUp":
        event.preventDefault();
        if (count) setActive((activeIndex - 1 + count) % count);
        return;
      case "PageDown":
      case "PageUp":
        event.preventDefault();
        if (count) setActive(Math.max(0, Math.min(count - 1, activeIndex + (event.key === "PageDown" ? 8 : -8))));
        return;
      case "Enter":
        // Always taken, so Enter never submits the surrounding form from the search box.
        event.preventDefault();
        if (matches[activeIndex]) pick(matches[activeIndex]);
        return;
      case "Escape":
        event.preventDefault();
        event.stopPropagation();
        hide("trigger");
        return;
    }
  }

  return (
    <div
      {...rest}
      ref={rootRef}
      className={["eq-phone-field", className].filter(Boolean).join(" ")}
      data-disabled={disabled || undefined}
      onBlur={(event) => {
        if (open && !(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) setShown(false);
      }}
    >
      <label className="eq-phone-field-label" htmlFor={inputId}>
        {label}
      </label>
      <div ref={controlRef} className="eq-phone-field-control" data-invalid={Boolean(message) || undefined}>
        <button
          ref={triggerRef}
          type="button"
          className="eq-phone-field-country"
          aria-haspopup="listbox"
          aria-expanded={open}
          aria-controls={listId}
          aria-label={`Country code: ${country.name}, +${country.dial}`}
          disabled={disabled}
          onClick={() => (open ? hide("trigger") : show())}
          onKeyDown={handleTriggerKey}
        >
          <span className="eq-phone-field-iso" aria-hidden="true">
            {country.code}
          </span>
          <span className="eq-phone-field-dial">+{country.dial}</span>
          <svg className="eq-phone-field-chevron" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="m4.5 6.25 3.5 3.5 3.5-3.5" />
          </svg>
        </button>
        <input
          ref={inputRef}
          id={inputId}
          className="eq-phone-field-input"
          type="tel"
          inputMode="tel"
          autoComplete="tel-national"
          placeholder={placeholder ?? format(country, "0123456789".slice(0, Math.min(max, country.lengths?.[1] ?? 10)).replace(/^0/, "7"))}
          value={draft ?? format(country, national)}
          required={required}
          disabled={disabled}
          aria-invalid={Boolean(message) || undefined}
          aria-describedby={[hintId, errorId].filter(Boolean).join(" ") || undefined}
          onChange={handleChange}
          onKeyDown={handleKeyDown}
          onBlur={() => {
            setTouched(true);
            setDraft(null);
          }}
        />
      </div>
      {present(hint) && (
        <p className="eq-phone-field-hint" id={hintId}>
          {hint}
        </p>
      )}
      {message && (
        <p className="eq-phone-field-error" id={errorId}>
          {message}
        </p>
      )}
      {name && <input type="hidden" name={name} value={e164} />}
      <div
        ref={popoverRef}
        className="eq-phone-field-popover"
        popover="manual"
        hidden={!open}
        onMouseDown={(event) => {
          if (!(event.target instanceof HTMLInputElement)) event.preventDefault();
        }}
      >
        <div className="eq-phone-field-search">
          <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
            <circle cx="7" cy="7" r="4.5" />
            <path d="m10.5 10.5 3 3" />
          </svg>
          <input
            ref={searchRef}
            className="eq-phone-field-search-input"
            type="text"
            role="combobox"
            aria-label="Search countries"
            aria-autocomplete="list"
            aria-expanded={open}
            aria-controls={listId}
            aria-activedescendant={matches.length ? optionId(activeIndex) : undefined}
            autoComplete="off"
            spellCheck={false}
            placeholder="Country or code"
            value={query}
            onChange={(event) => {
              setQuery(event.target.value);
              setActive(0);
            }}
            onKeyDown={handleSearchKey}
          />
        </div>
        <ul id={listId} className="eq-phone-field-list" role="listbox" aria-label="Countries">
          {matches.map((c, index) => (
            <li
              key={c.code}
              id={optionId(index)}
              className="eq-phone-field-option"
              role="option"
              aria-selected={c.code === country.code}
              data-active={index === activeIndex || undefined}
              onClick={() => pick(c)}
            >
              <span className="eq-phone-field-option-name">{c.name}</span>
              <span className="eq-phone-field-option-dial">+{c.dial}</span>
            </li>
          ))}
        </ul>
        {matches.length === 0 && <div className="eq-phone-field-empty">No country matches</div>}
      </div>
      <div className="eq-phone-field-status" role="status" aria-live="polite">
        {open && needle ? (matches.length === 0 ? "No country matches" : `${matches.length} ${matches.length === 1 ? "country" : "countries"}`) : ""}
      </div>
    </div>
  );
}