primefaces / primevue

Next Generation Vue UI Component Library
https://primevue.org
MIT License
9.69k stars 1.16k forks source link

Input Mask: Unable to enter characters in InputMask on Android Chrome #6070

Open crcastle opened 1 month ago

crcastle commented 1 month ago

Describe the bug

I am using the InputMask and FloatLabel components on a login page where users login with their phone number. It works great on desktop browsers and iOS Safari, but on Android Chrome (and Edge) the user is unable to enter anything into the field. Any ideas what the problem might be? I'm using PrimeVue 3.52.0.

Here is a short screen recording showing the user trying to enter numbers:

https://github.com/user-attachments/assets/9899470b-ec65-4846-baed-b0fe942a3ee3

And here is how I've implemented the components:

<template>
...
            <form @submit.prevent="signinSubmit" @keydown.enter="signinSubmit">
              <FloatLabel>
                <InputMask id="phone" name="phone" type="text" mask="9999-999-999" class="w-full md:w-30rem"
                  v-model="phone" slotChar="#" unmask v-focus inputmode="numeric" />
                <label for="phone">Phone</label>
              </FloatLabel>

              <div class="flex align-items-center justify-content-between mt-6 mb-5 gap-5">
                <Button :label="processing ? ' ' : 'Send Code'" :loading="processing" iconPos="bottom"
                  class="w-full p-3 text-xl" type="submit"></Button>
              </div>
            </form>
...
</template>
<script setup lang="ts">
const signinSubmit = async () => {
  processing.value = true;
  resetMessages();

  try {
    const form = new FormData();
    const intlPhone = (new PhoneNumber(phone.value)).internationalRaw;
    form.set("phone", intlPhone);

    await submitFormData(form, SIGNIN_API_PATH)
    isCodeSent.value = true;
  } catch (error) {
    if (error instanceof Error) {
      console.error("Error requesting OTP", error);
      resetForm();
      errorMessage.value = error.message;
      return;
    } else {
      errorMessage.value = "Unknown error :("
      throw error;
    }
  } finally {
    processing.value = false;
  }

  successMessage.value = "OTP token requested";
  isCodeSent.value = true;
}
</script>

Reproducer

https://stackblitz.com/edit/primevue-3-vite-ts-issue-template-t1s58c

PrimeVue version

3.52.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Android Chrome

Steps to reproduce the behavior

  1. Go to https://stackblitz.com/edit/primevue-3-vite-ts-issue-template-t1s58c on Android Chrome
  2. Try to enter numbers in the input box
  3. See that no numbers appear in the input box.

If the described behavior is not reproduced by this stackblitz, please try https://admin.saturdayquiztime.com.au/signin

Expected behavior

Expect numbers to appear in the input box as the user types.

crcastle commented 1 month ago

I figured out I can resolve this issue if I remove the unmask attribute from the InputMask element. I unmask the value later in my own code.