fix(tooltip): mark tooltip as dirty when changing its role#17382
Open
mddragnev wants to merge 5 commits into
Open
fix(tooltip): mark tooltip as dirty when changing its role#17382mddragnev wants to merge 5 commits into
mddragnev wants to merge 5 commits into
Conversation
mddragnev
added
❌ status: awaiting-test
Contributor
There was a problem hiding this comment.
Pull request overview
Adds regression coverage and a small runtime change to address ExpressionChangedAfterItHasBeenCheckedError when showing a sticky tooltip with a close button in zoneless Angular applications.
Changes:
- Added a zoneless-focused unit test for showing a sticky
IgxTooltipTargetDirectivewith a close button without triggering NG0100. - Updated sticky close-button attach/detach logic to request a change-detection refresh after changing the tooltip role.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts |
Adds a zoneless regression test around sticky tooltip + close button. |
projects/igniteui-angular/directives/src/directives/tooltip/tooltip-target.directive.ts |
Marks the tooltip for check after role changes when adding/removing the close button. |
mddragnev
changed the title
viktorkombov
added
💥 status: in-test
| button = fix.debugElement.query(By.directive(IgxTooltipTargetDirective)); | ||
| }); | ||
|
|
||
| it('should not throw ExpressionChangedAfterItHasBeenChecked when showing sticky tooltip with close button', async () => { |
Contributor
There was a problem hiding this comment.
The current test correctly covers the original ExpressionChangedAfterItHasBeenChecked regression when the sticky tooltip is shown. Since the implementation also adds markForCheck() when removing the close button, could we add coverage for that path as well? After showing the tooltip, set sticky to false, await fixture.whenStable(), and verify that the close button is removed and the role returns to "tooltip".
viktorkombov
added
✅ status: verified
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #17381
Description
Fixes
ExpressionChangedAfterItHasBeenCheckederror thrown when showing a stickyIgxTooltipTargetDirectivewith a close button in zoneless Angular applications.Motivation / Context
The dynamic creation of the
tooltip-close-buttonview triggers a newappRef.tickwhich is ran inrequestAnimationFrameinternally in angular. In zone CD there is additionaldetectChangebefore theRAFfires (It comes from the patch of theaddEventListenerwhich opens the tooltip) . However, in zoneless the method is not patched so the additional check made by angular to ensure that all bindings in a single tick are the same fails.Type of Change (check all that apply):
Component(s) / Area(s) Affected:
How Has This Been Tested?
Test Configuration:
Screenshots / Recordings
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)