InputMask: Passed props are not set

[SwitzerChees]

Describe the bug

Properties like id or name are not passed through anymore to the native rendered input of type text. The problem can be reproduced or seen directly in the official documentation: V4 Documentation (https://primevue.org/inputmask/):

<div class="flex-auto">
    <label for="phone" class="font-bold block mb-2">Phone</label>
    <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" fluid />
</div>

The rendered native input element is missing the id="phone" prop:

V3 Documentation (https://v3.primevue.org/inputmask/):

<div class="flex-auto">
    <label for="phone" class="font-bold block mb-2">Phone</label>
    <InputMask id="phone" v-model="value2" mask="(999) 999-9999" placeholder="(999) 999-9999" />
</div>

The rendered native input element has the id="phone" prop:

This problem not only exists on the official documentation website but also when I use the component directly in my own application.

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-yzbded?file=src%2FApp.vue

PrimeVue version

4.0.0

Vue version

4.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

1. use InputMask component

2. define id or name property in the input mask

3. check the rendered html output and check if they are missing.

Expected behavior

The same behaviour like on V3 and as described in the following part of the documentation (https://primevue.org/inputmask/#accessibility):

InputMask component renders a native input element that implicitly includes any passed prop.

[mertsincan]

Interesting! Do you get an error on console?

[SwitzerChees]

No there are no errors in the console, not on the official documentation page (https://primevue.org/inputmask/) and also not in my own application when I use the InputMask.

Back in V3 a native input element was used with v-bind: https://github.com/primefaces/primevue/blob/v3-prod/components/lib/inputmask/InputMask.vue

Now in the V4 there is now the :pt used from the InputText component: https://github.com/primefaces/primevue/blob/master/packages/primevue/src/inputmask/InputMask.vue and props like placeholder and class have their own props now.

maybe something in the passthrough logic doesn't work as expected?

[mertsincan]

Thanks a lot! We'll fix it in the next version.

[vanpyrzericj]

Just want to add onto this that being able to pass the type attribute (which we can do for <InputText>) would also be ideal, in addition to the OP's attributes.

This is helpful when, for example, an input mask of a phone number is added, where we want to set type="tel" for mobile keyboards to display the numeric keypad.

[tugcekucukoglu]

New pt usage of InputMask:

<InputMask
            :pt="{
                pcInputText: {
                    root: 'className'
                }
            }"
        />

[luke-z]

@tugcekucukoglu Isn't it a bit of an anti-pattern to place the id property inside a passthrough property instead of directly on the custom HTML element, which adds it to the input element?

[SwitzerChees]

That doesn't resolve the issue. Please check on your OWN documentation page the error remains even on your own page: https://primevue.org/inputmask/#mask

And the rendered native input element doesn't have the id anymore.

If there is now a way to pass through attributes with PT then it would also make sense to update your own documentation ;-).

[tugcekucukoglu]

@luke-z agree with you.

@SwitzerChees id property problem is obvious and there is no link with pt property.

Could you create an issue about this defect? I can fix it for the next version.

[SamuelWei]

@SwitzerChees I copied most of this issue and create a new one as @tugcekucukoglu asked for: https://github.com/primefaces/primevue/issues/6100

[SwitzerChees]

@SamuelWei that's great thank you 👍🏼