TagBox with the enabled hideSelectedItems option - The popup window height is not decreased when selecting items

src/popup-dropdown-view-model.ts

@@ -85,9 +85,10 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
       const newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(
         pos.top,
         height,
-        window.innerHeight
+        window.innerHeight,
+        verticalPosition
       );
-      if (!!newVerticalDimensions.height) {
+      if (!!newVerticalDimensions) {
         this.height = newVerticalDimensions.height + "px";
         pos.top = newVerticalDimensions.top;
       }

src/utils/popup.ts

@@ -59,9 +59,13 @@ export class PopupUtils {
   public static getCorrectedVerticalDimensions(
     top: number,
     height: number,
-    windowHeight: number
+    windowHeight: number,
+    verticalPosition: VerticalPosition
   ) {
-    let result = { height: height, top: top };
+    let result;
+    if(verticalPosition === "top") {
+      result = { height: height, top: top };
+    }
     if (top < 0) {
       result = { height: height + top, top: 0 };
     } else if (height + top > windowHeight) {

tests/components/popuptests.ts

@@ -1007,19 +1007,22 @@ QUnit.test("Check calculatePosition with window size method", (assert) => {
 });
 
 QUnit.test("Check getCorrectedVerticalDimensions if both directions do not fit", (assert) => {
-  let newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(-20, 200, 300);
+  let newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(-20, 200, 300, "bottom");
   assert.equal(newVerticalDimensions.height, 180);
   assert.equal(newVerticalDimensions.top, 0);
 
-  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(150, 200, 300);
+  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(150, 200, 300, "bottom");
   assert.equal(newVerticalDimensions.height, 150 - PopupUtils.bottomIndent);
   assert.equal(newVerticalDimensions.top, 150);
 
-  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(150, 450, 300);
+  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(150, 450, 300, "bottom");
   assert.equal(newVerticalDimensions.height, 150 - PopupUtils.bottomIndent);
   assert.equal(newVerticalDimensions.top, 150);
 
-  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(10, 200, 300);
+  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(10, 200, 300, "bottom");
+  assert.notOk(newVerticalDimensions);
+
+  newVerticalDimensions = PopupUtils.getCorrectedVerticalDimensions(10, 200, 300, "top");
   assert.equal(newVerticalDimensions.height, 200);
   assert.equal(newVerticalDimensions.top, 10);
 });

visualRegressionTests/tests/defaultV2/tagbox.ts

@@ -483,4 +483,76 @@ frameworks.forEach(async framework => {
       await takeElementScreenshot("tagbox-readonly-with-markdown.png", question, t, comparer);
     });
   });
+
+  test("Resize input & popup", async (t) => {
+    await wrapVisualTest(t, async (t, comparer) => {
+      await t.resizeWindow(600, 900);
+      await initSurvey(framework, {
+        showQuestionNumbers: "off",
+        questions: [
+          {
+            type: "tagbox",
+            name: "tagbox",
+            hideSelectedItems: true,
+            defaultValue: ["item1", "item2", "item3", "item4", "item5"],
+            choices: [
+              "item1",
+              "item2",
+              "item3",
+              "item4",
+              "item5",
+              "item6",
+              "item7",
+              "item8",
+              "item9",
+              "item10"
+            ]
+          }, {
+            type: "checkbox",
+            name: "question1",
+            choices: [
+              "item1",
+              "item2",
+              "item3",
+              "item4",
+              "item5",
+              "item6"
+            ]
+          }, {
+            type: "tagbox",
+            name: "tagbox2",
+            hideSelectedItems: true,
+            defaultValue: ["item1", "item2", "item3", "item4", "item5"],
+            choices: [
+              "item1",
+              "item2",
+              "item3",
+              "item4",
+              "item5",
+              "item6",
+              "item7",
+              "item8",
+              "item9",
+              "item10"
+            ]
+          }
+        ]
+      });
+      await t.click(Selector(".sd-dropdown__filter-string-input"));
+      await takeElementScreenshot("tagbox-question-popup-direction-bottom.png", Selector(".sd-body"), t, comparer);
+
+      await t
+        .click(getListItemByText("item7"))
+        .click(getListItemByText("item8"));
+      await takeElementScreenshot("tagbox-question-popup-direction-bottom-and-resize-input.png", Selector(".sd-body"), t, comparer);
+
+      await t.click(Selector(".sd-dropdown__filter-string-input").nth(1));
+      await takeElementScreenshot("tagbox-question-popup-direction-top.png", Selector(".sd-body"), t, comparer);
+
+      await t
+        .click(getListItemByText("item7"))
+        .click(getListItemByText("item8"));
+      await takeElementScreenshot("tagbox-question-popup-direction-top-and-resize-input.png", Selector(".sd-body"), t, comparer);
+    });
+  });
 });