ionic-team / ionic-team/ionic-framework
bug: React Hoof Forms/Ionic React: Fulfilling input value automatically based on input value tilting
- Langage dominant
- TypeScript
- Étoiles
- 52.7k
- Forks
- 13.3k
- Merge moyen
- 1 j 15 h
- PR mergées (30 j)
- 51
Description
# 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
```
Guide de contribution
Ouvrir le guide de contribution
Évaluation
Cette issue n'a pas encore été évaluée.