From 0ec73383ce534b96205d0321e7152ad4a12d80f8 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Wed, 25 Sep 2024 03:38:33 -0400 Subject: [PATCH] fix(core): overflow controller resize loop (#2855) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(core): add requestAnimation to resizeObserver on overflow controller * chore(core): add changeset * fix(core): replace checks, reduce overhead Co-authored-by: Benny Powers - עם ישראל חי! * chore(core): update changeset to correct change level Co-authored-by: Benny Powers - עם ישראל חי! * chore(core): update changeset language Co-authored-by: Benny Powers - עם ישראל חי! * test(tabs): add nextFrame to test given addtional requestAnimationFrame in overflow --------- Co-authored-by: Benny Powers - עם ישראל חי! --- .changeset/fluffy-bananas-remember.md | 5 +++++ core/pfe-core/controllers/overflow-controller.ts | 4 +++- elements/pf-tabs/test/pf-tabs.spec.ts | 3 +-- 3 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 .changeset/fluffy-bananas-remember.md diff --git a/.changeset/fluffy-bananas-remember.md b/.changeset/fluffy-bananas-remember.md new file mode 100644 index 0000000000..bfe1e4ba3d --- /dev/null +++ b/.changeset/fluffy-bananas-remember.md @@ -0,0 +1,5 @@ +--- +"@patternfly/pfe-core": patch +--- + +`OverflowController`: prevent browser from locking up in some scenarios diff --git a/core/pfe-core/controllers/overflow-controller.ts b/core/pfe-core/controllers/overflow-controller.ts index 368922b4b0..72bd5fcc61 100644 --- a/core/pfe-core/controllers/overflow-controller.ts +++ b/core/pfe-core/controllers/overflow-controller.ts @@ -45,7 +45,9 @@ export class OverflowController implements ReactiveController { }); #ro = new ResizeObserver(() => { - this.#setOverflowState(); + requestAnimationFrame(() => { + this.#setOverflowState(); + }); }); showScrollButtons = false; diff --git a/elements/pf-tabs/test/pf-tabs.spec.ts b/elements/pf-tabs/test/pf-tabs.spec.ts index 2fa33bd9f5..a8c7c3484d 100644 --- a/elements/pf-tabs/test/pf-tabs.spec.ts +++ b/elements/pf-tabs/test/pf-tabs.spec.ts @@ -199,11 +199,10 @@ describe('', function() { }); beforeEach(nextFrame); - beforeEach(updateComplete); + beforeEach(nextFrame); beforeEach(nextFrame); beforeEach(updateComplete); - it('should have visible scroll buttons if overflowed', function() { // Note: overflow buttons are not included in the accessibility tree otherwise we'd test // for buttons there. tabindex="-1" is used on the buttons to prevent focus and was a