ionic-team / ionic-team/ionic-framework

bug: React Hoof Forms/Ionic React: Fulfilling input value automatically based on input value tilting

Open
#22,718 2 comments 0 reactions 0 assignees View on GitHub
package: react type: bug
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

# Bug Report

**Ionic version:**

[ ] **4.x**
[x] **5.5.2**

**Current behavior:**

![Screen Recording 2020-12-24 at 18 50 41](https://user-images.githubusercontent.com/5034215/103134835-28af2280-46c5-11eb-9705-561c386f7ea0.gif)

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

```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.