issue: Controller render: Not able to set the parse value onChange

[niralivasoya]

Version Number

^7.45.1

Codesandbox/Expo snack

https://codesandbox.io/s/controller-input-9rqnjy?file=/src/App.tsx

Steps to reproduce

What I want to do, is in the TextInput, at some places I need to set the multiple value if the user types '90:90' is should convert to the Number[] type and send as a [90:90], and if they only enter the '90' it should convert it to the Number and set it as Number 90.

.

Expected behaviour

I want this functionality. I added the logic to parse the value. When I console the parsed value I get the correct value in the array and the number format. but somehow onChange function is not able to set the parsed value because when I console the value, it is still in the string format

What browsers are you seeing the problem on?

No response

Relevant log output

I have added the code sandbox code. Please help me to figure it out.

Code of Conduct

• I agree to follow this project's Code of Conduct

[Moshyfawn]

In your handleChange handler, you reach the final else statement, which passes the change event to the field's onChange function, which is the final field onChange call that sets the value to event.target.value, so the string field value is set.

[niralivasoya]

@Moshyfawn, can you please add your logic here(in the code) to set the parsed value if the props are containMultipleString true, How can I handle the conditional statements?

[Moshyfawn]

There is no issue with how RHF manages your values; once you have taken care of your own business logic and provided the value to the RHF field handler, you can use early return to prevent any unnecessary additional logic execution further down your handler that can override your parsed field value with event.target.value.

if (containsMultipleStrings) {
  const parsedValue = parseInputsValue(event.target.value)
  onChange(parsedValue)
  return // INFO: this will avoid the rest of the function to be executed
}

if (valueAsNumber) {
  const inputValue = handleNumberInput(event.target.value) // INFO: some abstraction over handling NaN and empty strings
  onChange(inputValue)
  return // INFO: this will avoid the rest of the function to be executed
}

onChange(event.target.value)

I cannot write your change handler for you, as I am unaware of your business logic. It is up to you to determine whether the valueAsNumber code block should run if containsMultipleStrings is true or if customOnChangeFunction has been passed.

[niralivasoya]

@Moshyfawn Here, I have handled the logic, but the issue is that I am setting the parsed value to the onChange once it sets the value as Number, I can't add the colon-separated value. Any suggestion on this?