ionic-team / ionic-team/ionic-framework
bug: Ion-input not showing error border input until second time focus out (ion-untouched is not changing to ion-touched only on second time focus out).
- Lingua principale
- TypeScript
- Stelle
- 52.7k
- Fork
- 13.3k
- Merge medio
- 1g 15h
- PR unite (30g)
- 51
Descrizione
### Prerequisites
- [x] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [x] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [x] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.
### Ionic Framework Version
v8.x
### Current Behavior
When the user clicks into the input field and focuses out for the first time, the error border/outline does not appear. It only shows up after the second time the user focuses out of the input.
https://github.com/user-attachments/assets/2f35d08f-5d4c-40ac-8deb-d99f4af008fa
### Expected Behavior
When the user clicks into the input field and then focuses out (blur event) for the first time, the input should immediately display the error border/outline if the value is invalid or empty.
https://github.com/user-attachments/assets/69dbf67d-e99b-4054-85fe-1cf613e12bb1
### Steps to Reproduce
1. Clone the project below
2. Run `npm install` to install dependencies
3. Run `npx nx serve tripcard` to run the project
4. Open the application in [http://localhost:4200](http://localhost:4200)
5. Then you could be able to reproduce the issue like acted in the video, in current behaviour section.
### Code Reproduction URL
https://github.com/Av1nag/ionic-input-untouched-issue
### Ionic Info
Note: I got info by making these steps
```bash
cd apps/tripcard
npx ionic info
```
Ionic:
Ionic CLI : 5.4.16 (/Users/gaddamsampathreddy/.npm/_npx/864a9e3c2cd0cf50/node_modules/ionic)
Ionic Framework : @ionic/angular 8.7.11 (/Users/gaddamsampathreddy/oaks/ionic-input-untouched-issue/node_modules/@ionic/angular)
@angular-devkit/build-angular : not installed
@angular-devkit/schematics : 20.2.2 (/Users/gaddamsampathreddy/oaks/ionic-input-untouched-issue/node_modules/@angular-devkit/schematics)
@angular/cli : 20.2.2 (/Users/gaddamsampathreddy/oaks/ionic-input-untouched-issue/node_modules/@angular/cli)
@ionic/angular-toolkit : not installed
Capacitor:
Capacitor CLI : 7.4.4
@capacitor/core : 7.4.4 (/Users/gaddamsampathreddy/oaks/ionic-input-untouched-issue/node_modules/@capacitor/core)
Utility:
cordova-res : not installed
native-run : 2.0.1
System:
NodeJS : v22.21.1 (/Users/gaddamsampathreddy/.nvm/versions/node/v22.21.1/bin/node)
npm : 10.9.4
OS : macOS Unknown
### Additional Information
This is not a typical ionic project which could be created using ionic cli. We've created this project using NX workspaces. And, I've no idea if that is driving the issue.
Guida per i contributori
Apri la guida per i contributori
Valutazione
Questa issue non è ancora stata valutata.