Problem
When a validation error is displayed below an input field (e.g., "Please enter a value"), the error persists even after the user starts typing. The error only clears when the user clicks the submit button again, which creates a poor user experience.
Evidence from UX review:
- Error callout remains visible after entering text in textarea
- Recommendation: "Clear error state when user starts typing in textarea (OnChange event)"
This affects textarea inputs and likely other input types (text, number, etc.) that use similar validation patterns.
Evidence
User testing screenshots show:
03-empty-input-error.png - Error displayed on empty input
04-transcript-entered.png - Error callout still visible after entering text
Source: Testing session from AIMeetingNotesExtractor app (session: 2b458b9a-e9ec-40d7-9aae-8918deaca21b)
Proposed Solution
Update the Ivy Framework input widgets to automatically clear validation errors when the user modifies the input value. This should apply to:
- TextareaInput - Clear error on
OnChange event
- TextInput - Clear error on
OnChange event
- NumberInput - Clear error on
OnChange event
- SelectInput - Clear error on value change
Implementation Approach
- Add state management to track when validation error has been shown
- Clear the error state when
OnChange fires (before next validation)
- Ensure this doesn't interfere with real-time validation patterns
Files to Check
src/Ivy/Widgets/Inputs/TextareaInput.cs
src/Ivy/Widgets/Inputs/TextInput.cs
src/Ivy/Widgets/Inputs/NumberInput.cs
src/Ivy/Widgets/Inputs/SelectInput.cs
Testing
After implementation:
- Test manually with an app that has validation errors
- Verify error clears immediately when user starts typing
- Ensure validation still works correctly on form submission
Notes
This is a UX improvement identified during user testing workflows: CreateConnection, CreateUsingReferenceConnection, CreateApp, CreateAdHocApp with references to ChatApp, DesignGuidelines, OpenAIConnection.
Problem
When a validation error is displayed below an input field (e.g., "Please enter a value"), the error persists even after the user starts typing. The error only clears when the user clicks the submit button again, which creates a poor user experience.
Evidence from UX review:
This affects textarea inputs and likely other input types (text, number, etc.) that use similar validation patterns.
Evidence
User testing screenshots show:
03-empty-input-error.png- Error displayed on empty input04-transcript-entered.png- Error callout still visible after entering textSource: Testing session from AIMeetingNotesExtractor app (session: 2b458b9a-e9ec-40d7-9aae-8918deaca21b)
Proposed Solution
Update the Ivy Framework input widgets to automatically clear validation errors when the user modifies the input value. This should apply to:
OnChangeeventOnChangeeventOnChangeeventImplementation Approach
OnChangefires (before next validation)Files to Check
src/Ivy/Widgets/Inputs/TextareaInput.cssrc/Ivy/Widgets/Inputs/TextInput.cssrc/Ivy/Widgets/Inputs/NumberInput.cssrc/Ivy/Widgets/Inputs/SelectInput.csTesting
After implementation:
Notes
This is a UX improvement identified during user testing workflows: CreateConnection, CreateUsingReferenceConnection, CreateApp, CreateAdHocApp with references to ChatApp, DesignGuidelines, OpenAIConnection.