Skip to content

Safari iOS autofill issue with prefix #722

@ghost

Description

We are formatting the phone number with the general configuration options, as the phone shortcut doesn't allow personalizing the delimiters and we want the phone number to be "+1 (xxx) xxx-xxxx", so we are using something like this:

new Cleave(".my-input", {
    numericOnly: true,
    blocks: [2, 0, 3, 0, 3, 4],
    delimiters: ["", " (", ")", " ", "-"],
    prefix: "+1"
});

The format works fine everywhere, but on Safari iOS, if the user taps the field and uses the Safari iOS Autofill, it doesn't work properly.

  • Safari Autofill saves numbers in the same format we are using, +1 (xxx) xxx-xxxx
  • on some devices it will add the extra 1 at the start, so the field will become "+1 (1xx) xxx-xxxx", with the last digit cut, forcing the user to edit the entire number to fix it.
  • sometimes the autofill can't add the number at all

When we remove the prefix, the autofill works properly.
I tried then to have the +1 as the first delimiter, but then the user can't type any phone number that has a "1" in it.

Is there any solution to this? It seems that Cleave is firing the format too fast and messing up the Safari autofill, so maybe a delayFormatting option would be a probably fix or something similar.

This doesn't happen on desktop browsers, Android, or even on Chrome iOS.

Any suggestions are appreciated on how to workaround this.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions