How to parse and transform value to all caps in input 'usd'=>'USD'. register

[skorphil]

Hi, i need input which takes user input and transform it to caps(both as displayed value and saved value).
User input Usd, the input shows: USD

<Input
        {...register(`${assetName}.currency`)}
        placeholder="USD"
      />

I have read this https://react-hook-form.com/advanced-usage#TransformandParse but it doesn't provide example with register.

What I noticed:
controller's field.onChange is completely different from register's onChange, so I cant reuse the provided example for my implementation.

Working solution i came up so far:

const formatCurrency = (assetName, event) => {
    const modifiedValue = event.target.value.toUpperCase();
    setValue(`${assetName}.currency`, modifiedValue); // I replaced field.onChange() with setValue()
  };
...
<Input
        {...register(`${assetName}.currency`, {
          onChange: (e) => formatCurrency(assetName, e),
        })}
        placeholder="USD"
      />

But is this the way it is supposed to be done? Is there better way?

[sujinleeme]

Hello.

To refresh register() vs Controller difference:

• register() can indeed be used with both controlled and uncontrolled components, it's typically best suited for native HTML form elements like <input>, <checkbox>, and <radio>.

• The <Controller>, a wrapper component is particularly useful when dealing with third-party UI components or custom components that require props to control their behavior.

Hence, as you provide the newonChange method, it needs to use setValue to update the value of the input field.

I created the example of currency input field using numeral.js here. I hope it helps your work. 😄

[skorphil]

Thank you! Seems like I get it right then.

I'm using Chakra UI, their docs suggest using register rather than Controller

[skorphil]

@sujinleeme Well, i have addition. The way i did this is bad because it resets the carret position, since setValue() seems to be async. So seems like the idea of taking user input, changing it and returning inside the field can not be implemented with register method. Will try with controller. If someone knows, how to make this with register, let me know. Docs kinda misdirecting stating that "it can be achieved with register as well"

This is not about making all caps but the same logic(get input value, transform it, write it with setValue()) and the same problem(carret jumping):
https://github.com/react-hook-form/react-hook-form/assets/6762009/cca9ffcf-9264-41ae-a8dd-55034cac0791

UPD: According to @sujinleeme sandbox, controller also seems to natively working bad with this scenario. But probably you can first update inputs value synchronously to prevent carret jumping

[skorphil]

Well, solved number formatting issue with a more complex approach with react-number-format
https://codesandbox.io/p/devbox/2fr55p?migrateFrom=y8qpsq