InputMask: model is not reactive when using `slot-char`

[homersimpsons]

Describe the bug

InputMask component does not react to model updates when we use the slot-char property.

Reproducer

https://stackblitz.com/edit/primevue-create-vue-issue-template-5zrdku?file=src%2FApp.vue

PrimeVue version

3.47.2

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

1. Go to https://stackblitz.com/edit/primevue-create-vue-issue-template-5zrdku?file=src%2FApp.vue
2. Click on "Generate Value"

Expected behavior

The value should display in the InputMask.

Diagnostic

It works with a different "user-pattern"

The component work with the following steps:

1. Go to https://stackblitz.com/edit/primevue-create-vue-issue-template-5zrdku?file=src%2FApp.vue
2. Enter any number inside the input mask
3. Click on "Generate Value"

Note that if you then remove the input value completely it does not work anymore.

Vue-reactivity works

We can clearly see that the value is correctly updated in the view by vue.

It works without slot-char

On https://stackblitz.com/edit/primevue-create-vue-issue-template-5zrdku?file=src%2FApp.vue if you remove the slot-char="" property it works

It works when calling updateValue

By attaching a ref to the component and calling updateValue it works:

const onClick = () => {
  model.value = '' + Math.floor(Math.random() * 9000 + 1000);
  nextTick(() => inputMaskRef.value.updateValue();
};

https://github.com/primefaces/primevue/blob/d7c25df7b02a5c9791be50a7769201b3508c0d59/components/lib/inputmask/InputMask.vue#L417

Reproduction Video

Screencast from 11-03-2024 14:29:10.webm

If you need any further details feel free to ask.

[mrc-bsllt]

Same in v.3.49.1 @homersimpsons have you found a temporary solution?

Edit: I set slot-char=" " (with a white space) and it works.

[homersimpsons]

@homersimpsons have you found a temporary solution?

Having a not-empty slot-char works, but on our side we did not want this behaviour as the user will "see" the spaces.

So we chose to manually call the updateValue function:

https://github.com/primefaces/primevue/blob/d7c25df7b02a5c9791be50a7769201b3508c0d59/components/lib/inputmask/InputMask.vue#L417

const inputMask = ref<HTMLElement | null>(null);

watch(
  () => props.modelValue,
  async () => {
    await nextTick(() => inputMask.value?.updateValue());
  }
);