ShowMaskOnFocus not working for input-mask in angular

Question

I am using input-mask library and wanted to implement masking for time format. Which will accept integer numbers in HH:mm format so used this as below

timeInputMask = createMask({
    mask: '[99:99]',
    showMaskOnFocus: true,
    showMaskOnHover:true
  });

<input maxlength="5" placeholder="__:__" [inputMask]="timeInputMask" />

After loading a textbox default masking is coming as ":" so its working fine. Problem is - as soon as I click inside the textbox, the masking is hiding i.e. text box is blank. After starts typing number the mask appears again.

Do you know how can we make masking visible on focus of he textbox?

Answer 1

Here i use https://github.com/ngneat/input-mask library.

*.html

<input maxlength="5" placeholder="HH:MM" [inputMask]="time" />

*.ts

time = createMask<Date>({
    alias:'datetime',
    inputFormat: 'HH:MM'
  });

Ref: https://stackblitz.com/edit/angular-ivy-sp6w7d?file=src%2Fapp%2Fapp.component.html