ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.02k stars 13.51k forks source link

Textarea input creating duplicated input when clicking on it #28811

Closed gustavoburbano closed 9 months ago

gustavoburbano commented 9 months ago

Prerequisites

Ionic Framework Version

v7.x

Current Behavior

textarea input is creating another textarea for some miliseconds and then deleting it, but this behaviour is creating a error "Duplicate form field id in the same form". I noticed this by searching for the input id, which only shows once, but I noticed that when clicking on the text area there was some html added underneat and deleted straight away, I recorded the behaviour to analyse it and noticed that the input is being cloned and deleted within a second, I could confirm that the input id is the same as shown in the added image.

This is some times happening to the ion-inputs as well but it is rare.

image

Expected Behavior

The textarea input should not be cloned when the user click on it (even if this input is created and deleted soon after).

Steps to Reproduce

  1. Create 2 textare inputs one under the other within the same page but in different form.
  2. Add 200 characters and save it, The value on next refresh should be the new text added before so the input should be filled up already.
  3. click on one of the textareas and then on the other and the input gets clonned for some miliseconds as shown in the image above.

Code Reproduction URL

No response

Ionic Info

ionic info [WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

   Require stack:
   - C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 6.19.0 (C:\Users\User\AppData\Roaming\npm\node_modules\@ionic\cli) Ionic Framework : @ionic/vue 7.6.2

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : 5.6.0 @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run : 2.0.0

System:

NodeJS : v16.20.2 (C:\Program Files\nodejs\node.exe) npm : 9.7.1 OS : Windows 10

Additional Information

No response

ionitron-bot[bot] commented 9 months ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

averyjohnston commented 9 months ago

This issue is being closed due to lack of a reproduction. If this is still a problem in the latest version of Ionic, please open a new issue and ensure the template is fully filled out. Thank you!