Has anyone been able to implement react-phone-number-input with RAC?

[deltasierra96]

After a few hours going back and forward, I'm struggling with getting the correct implementation with this library.

There is an implementation of it using Radix/Shadcn UI here that works flawlessly, however every time I try it, I get severe performance issues and tricky UI bugs - leading me to scrap the overall idea.

Has anyone tried this yet?

[snowystinger]

Might be easier to converse about it if you share what you're trying to do in a codesandbox or stackblitz. I'm not sure what you're trying to do.

[deltasierra96]

I mean it's pretty obvious from the title, not to mention linking the repo and a clear example that uses Radix instead of RAC ... I don't have an example either, because I can't get a functional example to work - hence the discussion if anyone else has attempted or had success.

Apart from this non-functioning code, that's all I have.

import { clsx } from "@/utils";
import { IconCheck, IconChevronDown } from "@tabler/icons-react";
import * as React from "react";
import {
  Button,
  Dialog,
  DialogTrigger,
  Input,
  type InputProps,
  Label,
  ListBox,
  ListBoxItem,
  Popover,
} from "react-aria-components";
import * as RPNInput from "react-phone-number-input";
import flags from "react-phone-number-input/flags";

// Props
export type PhoneInputProps = Omit<
  React.ComponentProps<"input">,
  "onChange" | "value" | "ref"
> &
  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
    onChange?: (value: RPNInput.Value) => void;
  };

export const PhoneInput = React.forwardRef<
  React.ElementRef<typeof RPNInput.default>,
  PhoneInputProps
>(({ className, onChange, ...props }, ref) => {
  return (
    <RPNInput.default
      ref={ref}
      className={clsx("flex", className)}
      flagComponent={FlagComponent}
      countrySelectComponent={CountrySelect}
      inputComponent={InputComponent}
      smartCaret={false}
      onChange={(value) => onChange?.(value ?? "")}
      {...props}
    />
  );
});
PhoneInput.displayName = "PhoneInput";

const InputComponent = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, ...props }, ref) => (
    <Input
      ref={ref}
      {...props}
      className={clsx(
        "rounded-s-none rounded-e-lg border px-3 py-2 text-sm",
        className,
      )}
    />
  ),
);
InputComponent.displayName = "InputComponent";

// Country Select using react-aria DialogTrigger + Popover
const CountrySelect = ({
  disabled,
  value: selectedCountry,
  options,
  onChange,
}: {
  disabled?: boolean;
  value: RPNInput.Country;
  options: { label: string; value: RPNInput.Country | undefined }[];
  onChange: (country: RPNInput.Country) => void;
}) => {
  const selectedLabel =
    options.find((c) => c.value === selectedCountry)?.label ?? "";

  return (
    <DialogTrigger>
      <Button
        key="trigger"
        className="flex items-center gap-2 rounded-s-lg border bg-white px-3 py-2 text-sm focus:ring-2"
        isDisabled={disabled}
      >
        <FlagComponent country={selectedCountry} countryName={selectedLabel} />
        <span className="text-sm">{selectedLabel}</span>
        <IconChevronDown className="ml-1 size-4 opacity-50" />
      </Button>
      <Popover
        key="popover"
        className="z-50 w-72 rounded-md border bg-white shadow-md"
      >
        <Dialog className="p-2 text-gray-700 outline-none">
          <Label className="sr-only">Choose country</Label>
          <ListBox
            items={options.filter((o) => o.value)}
            selectedKeys={[selectedCountry]}
            onSelectionChange={(keys) => {
              const [newCountry] = Array.from(keys) as RPNInput.Country[];
              if (newCountry) {
                onChange(newCountry);
              }
            }}
            className="max-h-60 overflow-y-auto p-1 text-sm"
          >
            {(item) => (
              <ListBoxItem
                key={item.value}
                textValue={item.label}
                className="flex items-center gap-2 px-2 py-1"
              >
                {({ isSelected }) => (
                  <>
                    <FlagComponent
                      country={item.value}
                      countryName={item.label}
                    />
                    <span className="flex-1">{item.label}</span>
                    <span className="text-gray-500">
                      +{RPNInput.getCountryCallingCode(item.value)}
                    </span>
                    {isSelected && <IconCheck className="ml-auto size-4" />}
                  </>
                )}
              </ListBoxItem>
            )}
          </ListBox>
        </Dialog>
      </Popover>
      ,
    </DialogTrigger>
  );
};

const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
  const Flag = flags[country];
  return (
    <span className="bg-ui-100 flex h-4 w-6 overflow-hidden rounded-sm [&_svg]:size-full">
      {Flag && <Flag title={countryName} />}
    </span>
  );
};

[cheema-corellian]

I mean it's pretty obvious from the title...

A phone number input component like the ones you included links to, does not exist in Shadcn or Radix or RAC. Third parties may have built a new component on top of existing Shadcn components that gets you what you want. For RAC, you would have to do the same.

I get the impression that you are asking that someone here do this work for you. I don't think that is the purpose of this free support group. Generally if you have a small issue and you provide example code with the issue, people are often quite helpful.

[deltasierra96]

I mean it's pretty obvious from the title...

A phone number input component like the ones you included links to, does not exist in Shadcn or Radix or RAC. Third parties may have built a new component on top of existing Shadcn components that gets you what you want. For RAC, you would have to do the same.

I get the impression that you are asking that someone here do this work for you. I don't think that is the purpose of this free support group. Generally if you have a small issue and you provide example code with the issue, people are often quite helpful.

I know, which is exactly what I asked if you read it correctly.

Re-read and you will clearly see I originally indicated that has anyone had any success using this library - obviously indicating that I know RAC doesn't have this component available. How is that not more glaringly obvious? I have provided an example using the library in the second reply? I didn't want "free support", I asked a simple question, and didn't provide a sandbox example because it simply doesn't work.

[snowystinger]

I understand you are frustrated that the code isn't working as you expect. We appreciate you sharing even incomplete code, as we can then see more precisely what you're trying to do.

Unfortunately, from the code, I cannot tell how you are trying to join these two things together or what more generally isn't working as expected.

I suspect you'll be wanting to reference one of the sections under our Advanced Customisation https://react-spectrum.adobe.com/react-aria/TextField.html#advanced-customization

severe performance issues and tricky UI bugs

Where are you seeing performance issues? when entering numbers? when changing the country?
What are the UI bugs you're seeing?

Please try to understand that everyone here wants you to succeed. https://github.com/adobe/react-spectrum/blob/main/CODE_OF_CONDUCT.md