ionic-team / ionic-team/ionic-framework

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

Đang mở
#22,718 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: react type: bug
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

# 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

```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.