ionic-team / ionic-team/ionic-framework
bug: React Hoof Forms/Ionic React: Fulfilling input value automatically based on input value tilting
- Lenguaje dominante
- TypeScript
- Estrellas
- 52.7k
- Forks
- 13.3k
- Merge medio
- 1 d 15 h
- PR fusionados (30 d)
- 51
Descripción
# Bug Report
**Ionic version:**
[ ] **4.x**
[x] **5.5.2**
**Current behavior:**

It is imposible to handle both values when the current's input value is changing.
**Expected behavior:**
The current input must have a normal behavior while the other input's value changes as the current input's value change.
**Steps to reproduce:**
Just go to the input and change its value.
**Related code:**
With the following code it was working fine:
```tsx
Cash Amount
setValue(
"posValue",
calculateFieldValue(e.detail.value)
)
}
required
/>
{errors?.cashValue && (
)}
POS Amount
setValue(
"cashValue",
calculateFieldValue(e.detail.value)
)
}
required
/>
{errors?.posValue && (
)}
{packageDetails?.orderData?.currencySymbol}
{packagePrice}
Pay
```
It was working also with this other code:
```tsx
const [formChangeFieldName, setFormChangeFieldName] = useState<'cashAmount' | 'posAmount'>()
const formMethods = useForm();
const { register, watch, errors, handleSubmit } = formMethods;
const { cashAmount, posAmount } = watch()
---
const onChangeInput = (e: any & { target: { name: string } }) => setFormChangeFieldName(e.target.name)
---
---
```
This was working pretty fine, but after update **Ionic** to `5.5.2` it stopped to work: `onIonChange` is not triggered(ensured by log), avoiding to launch `setFormChangeFieldName(e.target.name)`.
So, We developed the next code:
```ts
Nakit
(
{
console.log("Firing onChange at Cash!")
setValue("posAmount", calculateFieldValue(e.detail.value!))
// onChange(e.detail.value!)
}}
onIonBlur={onBlur}
required
/>
)}
/>
{formErrorMessage(errors.cashAmount)}
Pos
(
{
console.log("Firing onChange at POS!")
setValue("cashAmount", calculateFieldValue(e.detail.value!))
// onChange(e.detail.value!)
}}
onIonBlur={onBlur}
required
/>
)}
/>
{formErrorMessage(errors.posAmount)}
Ödeme yap
{packageDetails.orderData.currencySymbol}
{packageDetails.orderData.price}
```
**Other information:**
We opened a [question](https://stackoverflow.com/questions/65440610/react-hook-forms-ionic-react-fulfilling-input-value-automatically-based-on-chan) on **StackOverflow** in order to get an answer about this concern.
**Ionic info:**
```
❯ ionic info
Ionic:
Ionic CLI : 6.12.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 5.5.2
Capacitor:
Capacitor CLI : 2.4.5
@capacitor/core : 2.4.5
Utility:
cordova-res : not installed
native-run : not installed
System:
NodeJS : v15.4.0 (/usr/local/Cellar/node/15.4.0/bin/node)
npm : 7.0.15
OS : macOS Big Sur
```
Guía de contribución
Línea de trabajo
Start by reproducing the reported behavior in an Ionic React app using IonInput, React Hook Form, and Ionic 5.5.2, then inspect the IonInput onIonChange path and the provided controlled-input examples. Done means the change event fires when the input value changes and the paired field updates without breaking form validation.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react, typescript
- Área
- frontend
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Necesita aclaración
- Aptitud para principiantes
- 28/100