Ng-otp-input isn't working properly inside material stepper, otp input gets disabled

Question

I'm stuck in some problem, I'm using Material Stepper with reactive forms and inside this Stepper I'm having otp input field in step 2 from ng-otp-input which is light weight package and here is the selector. <ng-otp-input autocomplete="off" (onInputChange)="onOtpChange($event)" [config]="config" class="inline w-full lg:w-full"></ng-otp-input>. I've used this package before it works fine without stepper. The problem is that when I enter phone number in step 1 and click continue to send otp. My stepper works fine and moved to next step but the otp input field isn't working as expected. It always gets disabled and UI is disturbed. But when I refresh page it start working fine.

Here are some UI screenshots.

Step 1 when page loads

Step 2 when I click continue and refresh my page.(But after refresh i've to fill step 1 again. which is problem.)

Here is the prblem I'm facing(UI disturbed and fields are )

I'm confused what I'm doing wrong. Your help will be much appreciated.

Here is my html code from step 2. I'm using tailiwind-css for styling my stepper.

<mat-step>
<h3 [routerLinkActive]="['active']" [routerLinkActiveOptions]="{ exact: true }" [routerLink]="[adminRouteUrl]" class="absolute flex items-center pt-4 text-base font-thin text-gray-500 lg:text-lg text-start top-16">
    <svg xmlns="http://www.w3.org/2000/svg" class="inline w-5 h-5" viewBox="0 0 20 20" fill="currentColor">
        <path
            fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd"
        />
    </svg>
    <span class="items-center inline ml-2">Create Marketplace (Step 2 of 4)</span>
</h3>
<h1 class="mb-16 text-2xl font-medium tracking-wide lg:text-5xl text-start text-dark">
    Enter the 6 digit code <br />
    sent to <span class="text-2xl font-medium tracking-wide text-gray-400 lg:text-3xl">+{{countryCode }}{{phoneNumber}}</span>
</h1>
<form class="justify-start">
    <div class="items-center w-full mb-16 lg:inline-flex lg:w-62">
        <ng-otp-input autocomplete="off" (onInputChange)="onOtpChange($event)" [config]="config" class="inline w-full lg:w-full"></ng-otp-input>
        <p class="justify-center inline text-gray-500">Didn't receive a code? {{display}}<a (click)="resend()" class="ml-2 text-yellow-500 cursor-pointer">Resend</a></p>
    </div>
    <div class="flex justify-end w-full lg:w-62">
        <button mat-button matStepperPrevious class="back-btn">Back</button>
        <button mat-button (click)="handleClick()" [disabled]="!otp" class="primary-btn">Continue</button>
    </div>
</form>

and the .ts file

  config = {
  allowNumbersOnly: true,
  length: 6,
  isPasswordInput: false,
  disableAutoFocus: true,
  timer: 1,
  placeholder: '',
  inputStyles: {
    width: '50px',
    height: '50px',
  }
}

Thanks!

Answer 1

basically, you trying two say when page hit less than sm brakpoint (>576px) its gonna distrub, you can do one thing, you have to set css of ng-otp-input boxes that you can do using media query. have to just make the size small of otp boxes.

Here The solution

@media (min-width: 0px) and (max-width: 576px) {
::ng-deep .ng-otp-input-wrapper .otp-input {
   width: 2rem !important;
   height: 2rem !important;
   margin-right: 5px !important;
   margin-bottom: 5px !important;
}}