How to ensure value masking happens immediately when input type = password, without delay on a phone?

I'm working on a project wherein I have 5 input boxes of type password and after every input has been entered, the control goes to the next box.

But only after 3 or 4 inputs have been entered, are the previous digits getting masked. There is a delay of about 3-4 seconds only after which the key is getting masked.

Initially, I thought that it might be because of the keydown/keyup functions linked to the input boxes, but the masking delay is happening even after I removed all key events.

One thing I noticed was the same issue isn't occurring on a desktop, but it's happening only on mobile.

<div class="pin-div" id="form-group-id">
  <input name="pin" class="pin-inp" tabindex="0" type="password" maxlength="1" pattern="[0-9]*" inputmode="numeric" autocomplete="off" id="pin-a">
  <input name="pin" class="pin-inp" tabindex="0" type="password" maxlength="1" pattern="[0-9]*" inputmode="numeric" autocomplete="off" disabled="disabled" id="pin-b">
  <input name="pin" class="pin-inp" tabindex="0" type="password" maxlength="1" pattern="[0-9]*" inputmode="numeric" autocomplete="off" disabled="disabled" id="pin-c">
  <input name="pin" class="pin-inp" tabindex="0" type="password" maxlength="1" pattern="[0-9]*" inputmode="numeric" autocomplete="off" disabled="disabled" id="pin-d">
  <input name="pin" class="pin-inp" tabindex="0" type="password" maxlength="1" pattern="[0-9]*" inputmode="numeric" autocomplete="off" disabled="disabled" id="pin-e">
  <input name="pin" class="pin-inp" tabindex="0" type="password" maxlength="1" pattern="[0-9]*" inputmode="numeric" autocomplete="off" disabled="disabled" id="pin-f">
</div>

The same delay in masking the digits is happening even after I used input type = "tel"

What is the best way to ensure that there is no delay in masking inputs?