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

[crcastle]

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:

screen-20240717-074124.mp4

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]

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.