ionic-team / ionic-team/ionic-framework

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

Abierto
#22,718 2 comentarios 0 reacciones 0 asignados Ver en GitHub
package: react type: bug
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:**

![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

```

Guía de contribución

Abrir la 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

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.