From 9ccef37c44ca3e876f06bd5949da4280f999dacd Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 24 Mar 2023 09:57:06 -0400 Subject: [PATCH 1/2] docs(input): clarify error text behavior Someone on the Ionic Discord noted that we do not state `.ion-touched` is needed. This was a bug we fixed in https://github.com/ionic-team/ionic-framework/commit/ef33270b55122574e0fdb32187410d8d8a4fa1ae, but we did not update the docs. --- docs/api/input.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/api/input.md b/docs/api/input.md index 4d7df8eef12..301a5470f64 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -68,7 +68,9 @@ import Fill from '@site/static/usage/v7/input/fill/index.md'; ## Helper & Error Text -Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-input`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. +Helper and error text can be used inside of an input with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-input`. This ensures errors are not shown before the user has a chance to enter data. + +In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. import HelperError from '@site/static/usage/v7/input/helper-error/index.md'; From f3a400b27adc2b9c48cf0647ca336c5525b89b68 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Fri, 24 Mar 2023 10:00:29 -0400 Subject: [PATCH 2/2] Update textarea.md --- docs/api/textarea.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/api/textarea.md b/docs/api/textarea.md index bfd0e16d1f6..2cba78b56c3 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -49,7 +49,9 @@ import Fill from '@site/static/usage/v7/textarea/fill/index.md'; ## Helper & Error Text -Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` class is added to the `ion-textarea`. In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. +Helper and error text can be used inside of a textarea with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-textarea`. This ensures errors are not shown before the user has a chance to enter data. + +In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md'; @@ -145,4 +147,4 @@ interface TextareaCustomEvent extends CustomEvent { ## Slots - \ No newline at end of file +