Fix: Adjust the input allowed for the Claim Delay input field

[rumzledz]

Description

I'm just simply doing a check to see if the most recent version of the input conforms with our cleave rule. If not, then don't allow the field value to be updated.

Testing

1. Bring up the Advanced Payment form
2. Enter a space or a letter inside the Claim delay field
3. Verify that the field value doesn't get updated

Resolves #3479

[mmioana]

Nice start on this issue @rumzledz 🙌

Unfortunately I can still reproduce the issue upon initially entering a space

Screen.Recording.2024-11-28.at.10.06.02.mov

Also noticed this error in the console

So probably we need to add this prop to the input field value={field.value ?? ''}

Also left a comment for how we should update the if condition for the issue to not be present anymore on this field. However, please feel free to be ✨ creative ✨

[mmioana]

From my testing, in order to avoid the issue upon initially entering a space, I believe we have to update this condition to

          if (
            (!field.value && !formattedValue) ||
            formattedValue === field.value 
          ) {
            return;
          }

[rumzledz]

Oh that pesky space... thanks for this @mmioana !

[mmioana]

Smashed 💯

Screen.Recording.2024-11-28.at.13.11.00.mov

And no error regarding the uncontrolled input is showing up in the console

[Nortsova]

Niice ✨ I tested different whitespace characters and everything works great 👏