diff --git a/packages/survey-core/src/utils/responsivity-manager.ts b/packages/survey-core/src/utils/responsivity-manager.ts index a7fcdaa285..4f893af0e6 100644 --- a/packages/survey-core/src/utils/responsivity-manager.ts +++ b/packages/survey-core/src/utils/responsivity-manager.ts @@ -27,11 +27,12 @@ export class ResponsivityManager { private model: AdaptiveActionContainer, private itemsSelector: string, private dotsItemSize: number = null, - private delayedUpdateFunction?: (callback: () => void) => void + private delayedUpdateFunction: (callback: () => void) => void = (callback: () => void) => { if (queueMicrotask) queueMicrotask(callback); else callback(); } ) { this.model.updateCallback = (isResetInitialized: boolean) => { - if (isResetInitialized) + if (isResetInitialized) { this.isInitialized = false; + } setTimeout(() => { this.process(); }, 1); }; if (typeof ResizeObserver !== "undefined") { @@ -75,16 +76,6 @@ export class ResponsivityManager { : currentAction.maxDimension; } - private getRenderedVisibleActionsCount() { - let count = 0; - this.container.querySelectorAll(this.itemsSelector).forEach(item => { - if(this.calcItemSize(item as HTMLDivElement) > 0) { - count++; - } - }); - return count; - } - private calcItemsSizes() { if(this.isInitialized) return; const actions = this.model.actions; @@ -121,14 +112,8 @@ export class ResponsivityManager { this.isInitialized = true; processResponsiveness(); }; - if(this.getRenderedVisibleActionsCount() < this.model.visibleActions.length) { - if(this.delayedUpdateFunction) { - this.delayedUpdateFunction(callback); - } else if(queueMicrotask) { - queueMicrotask(callback); - } else { - callback(); - } + if (this.delayedUpdateFunction) { + this.delayedUpdateFunction(callback); } else { callback(); } diff --git a/packages/survey-core/tests/responsivityTests.ts b/packages/survey-core/tests/responsivityTests.ts index d00faa4b34..9001520b77 100644 --- a/packages/survey-core/tests/responsivityTests.ts +++ b/packages/survey-core/tests/responsivityTests.ts @@ -313,7 +313,6 @@ QUnit.test("ResponsivityManager process test", function (assert) { (manager.getComputedStyle) = () => { return { boxSizing: "content-box", paddingLeft: 5, paddingRight: 5 }; }; - manager["getRenderedVisibleActionsCount"] = () => model.actions.length; manager["calcItemsSizes"] = () => { model.actions.forEach(action => { action.minDimension = 20; diff --git a/testCafe/survey/titleActions.js b/testCafe/survey/titleActions.js index 733382179f..a76e3a7dbb 100644 --- a/testCafe/survey/titleActions.js +++ b/testCafe/survey/titleActions.js @@ -330,6 +330,51 @@ frameworks.forEach((framework) => { .expect(myAction.visible).ok() .expect(dotsItem.visible).notOk(); }); + + test("check adaptivity with title changes", async (t) => { + const json = { + questions: [ + { + name: "name", + type: "text", + placeHolder: "Jon Snow", + isRequired: true + } + ] + }; + await initSurvey(framework, json, { + onGetQuestionTitleActions: (_, opt) => { + opt.titleActions = [ + { + title: "Act1 long title for adaptivity testing", + iconName: "excellent", + action: () => { }, + }, + { + title: "Act2 long title for adaptivity testing", + iconName: "good", + action: () => { }, + }, + ]; + }, + }); + const myAction = Selector(".sv-action").nth(0); + const myAction2 = Selector(".sv-action").nth(1); + const dotsItem = Selector(".sv-action.sv-dots"); + + await t + .resizeWindow(600, 600) + .expect(myAction.find(".sv-action-bar-item__title").exists).ok() + .expect(myAction2.find(".sv-action-bar-item__title").exists).notOk() + .expect(dotsItem.visible).notOk(); + + await ClientFunction(() => { + window["survey"].getQuestionByName("name").getTitleToolbar().actions[0].title = "Act1.1 long title for adaptivity testing"; + })(); + await t + .expect(myAction.find(".sv-action-bar-item__title").exists).ok() + .expect(myAction2.find(".sv-action-bar-item__title").exists).notOk(); + }); }); const themeName = "defaultV2";