Skip to content

TreeSelect & ReactiveForm: Incorrect Behavior on Marking Controller as Touched #17723

@miladFaghihiEdiven

Description

@miladFaghihiEdiven

Describe the bug

The TreeSelect component incorrectly marks the form control as touched when the overlay is opened.

Why This Is a Problem?
Typically, error messages should be displayed when a form control is invalid and touched. However, with the current TreeSelect behavior, opening the overlay immediately triggers validation errors, which is not the expected UX.

It's because as soon as we open the TreeSelect overlay, the FormControl is marked as touched, and not when the overlay is closed or an item is selected.

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/mwanuzbv?file=src%2Fapp%2Ftree-select-reactive-forms-demo.html

Environment

PrimeNg 19.0.5

Angular version

19.0.0

PrimeNG version

v19

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

  • Open the treeSelect overlay.
  • The FormControl will mark immediately as touched.

Expected behavior

The FormControl must be marked as touched when:

  • The overlay is closed.
  • A user selects an item.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Component: AccessibilityIssue or pull request is related to WCAG or ARIAStatus: DiscussionIssue or pull request needs to be discussed by Core TeamType: BugIssue contains a bug related to a specific component. Something about the component is not working

    Type

    No type

    Projects

    Status

    Review

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions