Dropdown - Display a popup regardless of a device screen dimension

src/base-interfaces.ts

@@ -238,6 +238,7 @@ export interface ISurvey extends ITextProcessor, ISurveyErrorOwner {
   elementContentVisibilityChanged(element: ISurveyElement): void;
   onCorrectQuestionAnswer(question: IQuestion, options: any): void;
   processPopupVisiblityChanged(question: IQuestion, popupModel: PopupModel, visible: boolean): void;
+  processOpenDropdownMenu(question: IQuestion, options: IDropdownMenuOptions): void;
   chooseFiles(input: HTMLInputElement, callback: (files: File[]) => void, context?: { element: Base, item?: any, elementType?: string, propertyName?: string }): void;
 }
 export interface ISurveyImpl {
@@ -406,4 +407,12 @@ export interface ILoadFromJSONOptions {
 export interface ISaveToJSONOptions {
   storeDefaults?: boolean;
   version?: string;
+}
+
+export interface IDropdownMenuOptions {
+  menuType: "dropdown" | "popup" | "overlay";
+  deviceType: "mobile" | "tablet" | "desktop";
+  hasTouchScreen: boolean;
+  screenHeight: number;
+  screenWidth: number;
 }

src/dropdownListModel.ts

@@ -1,10 +1,12 @@
 import { IAction } from "./actions/action";
 import { Base } from "./base";
-import { DomDocumentHelper } from "./global_variables_utils";
+import { IDropdownMenuOptions } from "./base-interfaces";
+import { DomDocumentHelper, DomWindowHelper } from "./global_variables_utils";
 import { ItemValue } from "./itemvalue";
 import { property } from "./jsonobject";
 import { IListModel, ListModel } from "./list";
 import { IPopupOptionsBase, PopupModel } from "./popup";
+import { calculateIsTablet } from "./popup-dropdown-view-model";
 import { Question } from "./question";
 import { QuestionDropdownModel } from "./question_dropdown";
 import { settings } from "./settings";
@@ -94,6 +96,27 @@ export class DropdownListModel extends Base {
     this._popupModel.focusFirstInputSelector = this.focusFirstInputSelector;
   }
 
+  private getDropdownMenuOptions(): IDropdownMenuOptions {
+    const windowWidth = DomWindowHelper.getInnerWidth();
+    const windowHeight = DomWindowHelper.getInnerHeight();
+    const isTablet = calculateIsTablet(windowWidth, windowHeight);
+
+    let menuType: "overlay" | "popup" | "dropdown" = "dropdown";
+    let deviceType: "mobile" | "tablet" | "desktop" = "desktop";
+    if (IsTouch) {
+      menuType = isTablet ? "popup" : "overlay";
+      deviceType = isTablet ? "tablet" : "mobile";
+    }
+
+    return <IDropdownMenuOptions>{
+      menuType: menuType,
+      deviceType: deviceType,
+      hasTouchScreen: IsTouch,
+      screenHeight: windowHeight,
+      screenWidth: windowWidth
+    };
+  }
+
   protected createPopup(): void {
     const popupOptions: IPopupOptionsBase = { verticalPosition: "bottom", horizontalPosition: "center", showPointer: false };
     this._popupModel = new PopupModel("sv-list", { model: this.listModel }, popupOptions);
@@ -118,9 +141,16 @@ export class DropdownListModel extends Base {
         this.updateQuestionChoices();
       }
 
-      if (option.isVisible && !!this.question.onOpenedCallBack) {
+      if (option.isVisible) {
         this.updatePopupFocusFirstInputSelector();
-        this.question.onOpenedCallBack();
+
+        const dropdownMenuOptions = this.getDropdownMenuOptions();
+        this.question.processOpenDropdownMenu(dropdownMenuOptions);
+        this._popupModel.updateDisplayMode(dropdownMenuOptions.menuType);
+
+        if (!!this.question.onOpenedCallBack) {
+          this.question.onOpenedCallBack();
+        }
       }
       if (!option.isVisible) {
         this.onHidePopup();

src/popup-dropdown-view-model.ts

@@ -8,7 +8,16 @@ import { settings } from "./settings";
 import { SurveyModel } from "./survey";
 import { DomDocumentHelper, DomWindowHelper } from "./global_variables_utils";
 
+export function calculateIsTablet(windowWidth?: number, windowHeight?: number): boolean {
+  const _windowWidth = windowWidth || DomWindowHelper.getInnerWidth();
+  const _windowHeight = windowHeight || DomWindowHelper.getInnerHeight();
+  const width = Math.min(_windowWidth, _windowHeight);
+  const isTablet = width >= PopupDropdownViewModel.tabletSizeBreakpoint;
+  return isTablet;
+}
+
 export class PopupDropdownViewModel extends PopupBaseViewModel {
+  static readonly tabletSizeBreakpoint = 600;
   private scrollEventCallBack = (event: any) => {
     if (this.isOverlay && IsTouch) {
       event.stopPropagation();
@@ -17,10 +26,8 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
     }
     this.hidePopup();
   }
-  private static readonly tabletSizeBreakpoint = 600;
-  private calculateIsTablet(windowWidth: number, windowHeight: number) {
-    const width = Math.min(windowWidth, windowHeight);
-    this.isTablet = width >= PopupDropdownViewModel.tabletSizeBreakpoint;
+  private calculateIsTablet(windowWidth?: number, windowHeight?: number) {
+    this.isTablet = calculateIsTablet(windowWidth, windowHeight);
   }
   private resizeEventCallback = () => {
     if(!DomWindowHelper.isAvailable()) return;
@@ -180,10 +187,11 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
     return actualHorizontalPosition;
   }
   protected getStyleClass(): CssClassBuilder {
+    const overlayMode = this.model.overlayDisplayMode;
     return super.getStyleClass()
       .append("sv-popup--dropdown", !this.isOverlay)
-      .append("sv-popup--dropdown-overlay", this.isOverlay && this.model.overlayDisplayMode !== "overlay")
-      .append("sv-popup--tablet", this.isTablet && this.isOverlay)
+      .append("sv-popup--dropdown-overlay", this.isOverlay && overlayMode !== "plain")
+      .append("sv-popup--tablet", this.isOverlay && (overlayMode == "tablet-dropdown-overlay" || (overlayMode == "auto" && this.isTablet)))
       .append("sv-popup--show-pointer", !this.isOverlay && this.showHeader)
       .append(`sv-popup--${this.popupDirection}`, !this.isOverlay && (this.showHeader || this.popupDirection == "top" || this.popupDirection == "bottom"));
   }
@@ -233,7 +241,7 @@ export class PopupDropdownViewModel extends PopupBaseViewModel {
         this.container.addEventListener("touchstart", this.touchStartEventCallback);
         this.container.addEventListener("touchmove", this.touchMoveEventCallback);
       }
-      this.calculateIsTablet(DomWindowHelper.getInnerWidth(), DomWindowHelper.getInnerHeight());
+      this.calculateIsTablet();
       this.resizeEventCallback();
     }
     DomWindowHelper.addEventListener("scroll", this.scrollEventCallBack);

src/popup.ts

@@ -46,7 +46,7 @@ export class PopupModel<T = any> extends Base implements IPopupOptionsBase {
   @property({ defaultValue: true }) isFocusedContainer: boolean;
   @property({ defaultValue: "" }) cssClass: string;
   @property({ defaultValue: "" }) title: string;
-  @property({ defaultValue: "auto" }) overlayDisplayMode: "auto" | "overlay" | "dropdown-overlay";
+  @property({ defaultValue: "auto" }) overlayDisplayMode: "auto" | "tablet-dropdown-overlay" | "dropdown-overlay" | "plain";
   @property({ defaultValue: "popup" }) displayMode: "popup" | "overlay";
   @property({ defaultValue: "flex" }) positionMode: PositionMode;
 
@@ -107,6 +107,24 @@ export class PopupModel<T = any> extends Base implements IPopupOptionsBase {
     this.onFooterActionsCreated.fire(this, options);
     return options.actions;
   }
+  public updateDisplayMode(menuType: "dropdown" | "popup" | "overlay"): void {
+    switch (menuType) {
+      case "dropdown": {
+        this.displayMode = "popup";
+        break;
+      }
+      case "popup": {
+        this.displayMode = "overlay";
+        this.overlayDisplayMode = "tablet-dropdown-overlay";
+        break;
+      }
+      case "overlay": {
+        this.displayMode = "overlay";
+        this.overlayDisplayMode = "dropdown-overlay";
+        break;
+      }
+    }
+  }
   public onHiding(): void {
     this.refreshInnerModel();
     this.onHide();

src/question.ts

@@ -1,7 +1,7 @@
 import { HashTable, Helpers } from "./helpers";
 import { JsonObject, Serializer, property } from "./jsonobject";
 import { Base, EventBase } from "./base";
-import { IElement, IQuestion, IPanel, IConditionRunner, ISurveyImpl, IPage, ITitleOwner, IProgressInfo, ISurvey, IPlainDataOptions } from "./base-interfaces";
+import { IElement, IQuestion, IPanel, IConditionRunner, ISurveyImpl, IPage, ITitleOwner, IProgressInfo, ISurvey, IPlainDataOptions, IDropdownMenuOptions } from "./base-interfaces";
 import { SurveyElement } from "./survey-element";
 import { AnswerRequiredError, CustomError } from "./error";
 import { SurveyValidator, IValidatorOwner, ValidatorRunner } from "./validator";
@@ -2505,6 +2505,9 @@ export class Question extends SurveyElement<Question>
   public processPopupVisiblilityChanged(popupModel: PopupModel, visible: boolean): void {
     this.survey.processPopupVisiblityChanged(this, popupModel, visible);
   }
+  public processOpenDropdownMenu(options: IDropdownMenuOptions): void {
+    this.survey.processOpenDropdownMenu(this, options);
+  }
 
   protected onTextKeyDownHandler(event: any) {
     if (event.keyCode === 13) {

src/survey-events-api.ts

@@ -1,6 +1,6 @@
 import { IAction } from "./actions/action";
 import { Base } from "./base";
-import { IElement, IPanel, ISurveyElement, IValueItemCustomPropValues } from "./base-interfaces";
+import { IDropdownMenuOptions, IElement, IPanel, ISurveyElement, IValueItemCustomPropValues } from "./base-interfaces";
 import { ItemValue } from "./itemvalue";
 import { PageModel } from "./page";
 import { PanelModel, PanelModelBase } from "./panel";
@@ -1021,6 +1021,15 @@ export interface PopupVisibleChangedEvent extends QuestionEventMixin {
   visible: boolean;
 }
 
+export interface OpenDropdownMenuEvent extends QuestionEventMixin {
+  menuType: "dropdown" | "popup" | "overlay";
+  deviceType: "mobile" | "tablet" | "desktop";
+  hasTouchScreen: boolean;
+  screenHeight: number;
+  screenWidth: number;
+  question: Question;
+}
+
 export interface ElementWrapperComponentEventMixin {
   element: any;
   wrapperName: string;

src/survey.ts

@@ -18,7 +18,8 @@ import {
   IPlainDataOptions,
   LayoutElementContainer,
   IValueItemCustomPropValues,
-  ILoadFromJSONOptions
+  ILoadFromJSONOptions,
+  IDropdownMenuOptions
 } from "./base-interfaces";
 import { SurveyElementCore, SurveyElement } from "./survey-element";
 import { surveyCss } from "./defaultCss/defaultV2Css";
@@ -65,7 +66,8 @@ import {
   DynamicPanelGetTabTitleEvent, DynamicPanelCurrentIndexChangedEvent, IsAnswerCorrectEvent, DragDropAllowEvent, ScrollingElementToTopEvent, GetQuestionTitleActionsEvent,
   GetPanelTitleActionsEvent, GetPageTitleActionsEvent, GetPanelFooterActionsEvent, GetMatrixRowActionsEvent, ElementContentVisibilityChangedEvent, GetExpressionDisplayValueEvent,
   ServerValidateQuestionsEvent, MultipleTextItemAddedEvent, MatrixColumnAddedEvent, GetQuestionDisplayValueEvent, PopupVisibleChangedEvent, ChoicesSearchEvent,
-  OpenFileChooserEvent, ElementWrapperComponentNameEvent, ElementWrapperComponentDataEvent
+  OpenFileChooserEvent, ElementWrapperComponentNameEvent, ElementWrapperComponentDataEvent,
+  OpenDropdownMenuEvent
 } from "./survey-events-api";
 import { QuestionMatrixDropdownModelBase } from "./question_matrixdropdownbase";
 import { QuestionMatrixDynamicModel } from "./question_matrixdynamic";
@@ -844,6 +846,8 @@ export class SurveyModel extends SurveyElementCore
    */
   public onPopupVisibleChanged: EventBase<SurveyModel, PopupVisibleChangedEvent> = this.addEvent<SurveyModel, PopupVisibleChangedEvent>();
 
+  public onOpenDropdownMenu: EventBase<SurveyModel, OpenDropdownMenuEvent> = this.addEvent<SurveyModel, OpenDropdownMenuEvent>();
+
   public onElementWrapperComponentName: EventBase<SurveyModel, ElementWrapperComponentNameEvent> = this.addEvent<SurveyModel, ElementWrapperComponentNameEvent>();
   public onElementWrapperComponentData: EventBase<SurveyModel, ElementWrapperComponentDataEvent> = this.addEvent<SurveyModel, ElementWrapperComponentDataEvent>();
   //#endregion
@@ -7675,6 +7679,11 @@ export class SurveyModel extends SurveyElementCore
   public processPopupVisiblityChanged(question: Question, popup: PopupModel<any>, visible: boolean): void {
     this.onPopupVisibleChanged.fire(this, { question, popup, visible });
   }
+  public processOpenDropdownMenu(question: Question, options: IDropdownMenuOptions): void {
+    const newOptions = Object.assign({ question }, options);
+    this.onOpenDropdownMenu.fire(this, newOptions as OpenDropdownMenuEvent);
+    options.menuType = newOptions.menuType;
+  }
 
   /**
    * Applies a specified theme to the survey.

src/surveyToc.ts

@@ -70,7 +70,7 @@ export class TOCModel {
   constructor(public survey: SurveyModel) {
     this.listModel = createTOCListModel(survey, () => { this.popupModel.isVisible = false; });
     this.popupModel = new PopupModel("sv-list", { model: this.listModel });
-    this.popupModel.overlayDisplayMode = "overlay";
+    this.popupModel.overlayDisplayMode = "plain";
     this.popupModel.displayMode = <any>new ComputedUpdater(() => this.isMobile ? "overlay" : "popup");
     if (TOCModel.StickyPosition) {
       survey.onAfterRenderSurvey.add((s, o) => this.initStickyTOCSubscriptions(o.htmlElement));

tests/components/popuptests.ts

@@ -1037,6 +1037,51 @@ QUnit.test("PopupModel dropdown displayMode", (assert) => {
   targetElement.remove();
 });
 
+QUnit.test("PopupModel displayMode overlay and overlayDisplayMode", (assert) => {
+  const model: PopupModel = new PopupModel("sv-list", {});
+  const targetElement: HTMLElement = document.createElement("div");
+  const viewModel: PopupDropdownViewModel = createPopupViewModel(model, targetElement) as PopupDropdownViewModel;
+  viewModel.initializePopupContainer();
+  viewModel.container.innerHTML = popupTemplate;
+
+  assert.equal(viewModel.showFooter, false);
+
+  assert.equal(viewModel["isTablet"], false, "isTablet false");
+  assert.equal(model.overlayDisplayMode, "auto");
+
+  assert.equal(viewModel.styleClass, "sv-popup--dropdown sv-popup--show-pointer sv-popup--left", "isTablet false");
+  model.displayMode = "overlay";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay", "overlayDisplayMode auto, isTablet false");
+
+  model.overlayDisplayMode = "dropdown-overlay";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay", "overlayDisplayMode dropdown-overlay, isTablet false");
+
+  model.overlayDisplayMode = "tablet-dropdown-overlay";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay sv-popup--tablet", "overlayDisplayMode tablet-dropdown-overlay, isTablet false");
+
+  model.overlayDisplayMode = "plain";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay", "overlayDisplayMode plain, isTablet false");
+
+  model.overlayDisplayMode = "auto";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay", "overlayDisplayMode auto, isTablet false");
+
+  viewModel["calculateIsTablet"](600, 600);
+  assert.equal(viewModel["isTablet"], true, "isTablet true");
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay sv-popup--tablet", "overlayDisplayMode auto, isTablet true");
+
+  model.overlayDisplayMode = "dropdown-overlay";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay", "overlayDisplayMode dropdown-overlay, isTablet true");
+
+  model.overlayDisplayMode = "tablet-dropdown-overlay";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay sv-popup--dropdown-overlay sv-popup--tablet", "overlayDisplayMode tablet-dropdown-overlay, isTablet true");
+
+  model.overlayDisplayMode = "plain";
+  assert.equal(viewModel.styleClass, "sv-popup--overlay", "overlayDisplayMode plain, isTablet true");
+
+  viewModel.dispose();
+  targetElement.remove();
+});
+
 QUnit.test("PopupModel isModal displayMode", (assert) => {
   const model: PopupModel = new PopupModel("sv-list", {});
   const targetElement: HTMLElement = document.createElement("div");

tests/surveytests.ts

@@ -18595,7 +18595,7 @@ QUnit.test("Expression with dates & defaultValueExpression & expression question
   checkFunc([true, true, false, false, true], 3);
 });
 
-QUnit.test("Check onPopupVisibleChanged events", function (assert) {
+QUnit.test("Check onPopupVisibleChanged events #1", function (assert) {
   const survey = new SurveyModel({
     elements: [
       {
@@ -18618,7 +18618,7 @@ QUnit.test("Check onPopupVisibleChanged events", function (assert) {
   popup.toggleVisibility();
   assert.equal(log, "->true->false");
 });
-QUnit.test("Check onPopupVisibleChanged events", function (assert) {
+QUnit.test("Check onPopupVisibleChanged events #2", function (assert) {
   assert.equal(settings.comparator.caseSensitive, false, "comparator.caseSensitive is false");
   const survey = new SurveyModel({ elements: [{ "type": "text", "name": "q1" }] });
   const q = survey.getQuestionByName("q1");
@@ -18628,6 +18628,34 @@ QUnit.test("Check onPopupVisibleChanged events", function (assert) {
   q.value = "abc";
   assert.equal(q.value, "ABC", "Convert to upper case");
 });
+
+QUnit.test("Check onOpenDropdownMenu events", function (assert) {
+  const survey = new SurveyModel({
+    elements: [
+      {
+        "type": "dropdown",
+        "name": "q1",
+        "choices": ["Item1", "Item2", "Item3"]
+      },
+    ]
+  });
+  const question = <QuestionDropdownModel>survey.getAllQuestions()[0];
+  const popup = question.dropdownListModel.popupModel;
+  survey.onOpenDropdownMenu.add((_, options) => {
+    assert.equal(options.question, question);
+    assert.equal(options.menuType, "dropdown");
+
+    options.menuType = "overlay";
+  });
+
+  assert.equal(popup.displayMode, "popup");
+  assert.equal(popup.overlayDisplayMode, "auto");
+
+  popup.toggleVisibility();
+  assert.equal(popup.displayMode, "overlay");
+  assert.equal(popup.overlayDisplayMode, "dropdown-overlay");
+});
+
 QUnit.test("Shared data #6584", (assert) => {
   const json = {
     logoPosition: "right",

visualRegressionTests/tests/defaultV2/popup.ts

@@ -165,7 +165,7 @@ function addActionsWithOverlayPopupShortList(_, opt) {
     { title: "Overlay with title", showTitle: true },
     { items: items, displayMode: "overlay", title: "Title" }
   );
-  overlayWithTypePopupAction.popupModel.overlayDisplayMode = "overlay";
+  overlayWithTypePopupAction.popupModel.overlayDisplayMode = "plain";
   opt.titleActions = [overlayPopupAction, overlayWithTypePopupAction];
 }
 
@@ -187,7 +187,7 @@ function addActionsWithOverlayPopupLongList(_, opt) {
     { title: "Overlay with title", showTitle: true, },
     { items: items, displayMode: "overlay", title: "Title" }
   );
-  overlayWithTypePopupAction.popupModel.overlayDisplayMode = "overlay";
+  overlayWithTypePopupAction.popupModel.overlayDisplayMode = "plain";
   opt.titleActions = [overlayPopupAction, overlayWithTypePopupAction];
 }