Skip to content

fix(#3964): mark Angular input/textarea as touched on blur only#4079

Open
Spark450 wants to merge 1 commit into
devfrom
mark/input-touched-on-blur
Open

fix(#3964): mark Angular input/textarea as touched on blur only#4079
Spark450 wants to merge 1 commit into
devfrom
mark/input-touched-on-blur

Conversation

@Spark450

Copy link
Copy Markdown
Collaborator

Before (the change)

Using .touched on a reactive FormControl for validation triggered as soon as a user tabbed into a goab-input (or goab-textarea). The Angular wrappers called markAsTouched on focus, change, and keypress, so the error state appeared before the user had interacted and left the field.

After (the change)

markAsTouched runs only on blur, matching the definition of touched: entered and then left.

  • Input wrapper: removed markAsTouched from _onChange, _onKeyPress, and _onFocus (also removed the redundant fcTouched call in _onKeyPress); added it to _onBlur.
  • Textarea wrapper: removed markAsTouched from _onChange and _onKeyPress; the existing _onBlur call remains.

This is an Angular wrapper only change. markAsTouched is part of the Angular ControlValueAccessor integration, so the Svelte source and React wrapper are unaffected.

Make sure that you've checked the boxes below before you submit the PR

  • I have read and followed the setup steps
  • I have created necessary unit tests
  • I have tested the functionality in both React and Angular.

Steps needed to test

  1. Run the Angular playground and open the 3964 bug page.
  2. Tab into the Last name field and tab straight out without typing. The required error appears, because the control was entered and then left.
  3. Tab into the field and type without leaving. No error appears while focused.
  4. Repeat for the Bio textarea.
  5. Confirm lastName.touched / bio.touched stay false on focus, change, and keypress, and flip to true on blur.

Fixes #3964

🤖 Generated with Claude Code

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown
PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://GovAlta.github.io/ui-components/pr-preview-angular/pr-4079/

Built to branch gh-pages at 2026-06-19 22:18 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@github-actions

github-actions Bot commented Jun 19, 2026

Copy link
Copy Markdown

Preview links

Target URL
Docs https://govalta.github.io/ui-components/pr-preview/pr-4079/
React playground https://govalta.github.io/ui-components/pr-preview-react/pr-4079/
Angular playground https://govalta.github.io/ui-components/pr-preview-angular/pr-4079/

Built from commit d482353. Previews are removed automatically when this PR closes.

@Spark450 Spark450 force-pushed the mark/input-touched-on-blur branch from 0e45bbe to 227c116 Compare June 19, 2026 17:30
const detail = { ...(e as CustomEvent<GoabInputOnKeyPressDetail>).detail, event: e };
this.onKeyPress.emit(detail);

this.fcTouched?.();

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vanessatran-ddi not sure if this should have been removed?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes this should be removed.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirmed, leaving this removed. The redundant fcTouched call was the same touch trigger as markAsTouched, which now runs on blur only.

@Spark450 Spark450 marked this pull request as ready for review June 19, 2026 17:38
Comment thread libs/angular-components/src/lib/components/input/input.spec.ts Outdated
Comment thread libs/angular-components/src/lib/components/textarea/textarea.spec.ts Outdated
Comment thread apps/prs/react/src/routes/bugs/bug3964.tsx Outdated
Comment thread apps/prs/angular/src/routes/bugs/3964/bug3964.component.html
NgModel,
ReactiveFormsModule,
} from "@angular/forms";
import { ViewChild } from "@angular/core";

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be imported on line 3, where we already import other stuff from @angular/core

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, consolidated ViewChild into the existing @angular/core import.

NgModel,
ReactiveFormsModule,
} from "@angular/forms";
import { ViewChild } from "@angular/core";

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing here

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, same fix here.

Reactive FormControl validation using .touched fired as soon as a user
tabbed into the field, because the Angular wrappers called markAsTouched
on focus, change, and keypress. Touched should mean entered and then
left, so markAsTouched now runs only on blur.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@Spark450 Spark450 force-pushed the mark/input-touched-on-blur branch from 57110d5 to d482353 Compare June 19, 2026 22:15
@Spark450 Spark450 requested a review from ArakTaiRoth June 19, 2026 22:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Input being marked as touch (Angular) when user tabs into it

3 participants