Drop-down list uses the desktop view on the mobile. (#5924)

* work for #5922 Drop-down list uses the desktop view on the mobile. * work for #5922 Drop-down list uses the desktop view on the mobile. --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Oct 1, 2024 · 9a35073 · 9a35073
1 parent 319f31a
commit 9a35073
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 5 deletions.
diff --git a/packages/survey-creator-core/src/components/simulator.ts b/packages/survey-creator-core/src/components/simulator.ts
@@ -1,17 +1,19 @@
 import { Base, CssClassBuilder, property, SurveyModel } from "survey-core";
+import { SurveyCreatorModel } from "../creator-base";
 
 require("./simulator.scss");
 
 export class SurveySimulatorModel extends Base {
   private surveyChanged() {
     const _this = this;
     this.survey.onOpenDropdownMenu.add((_, options) => {
+      if (this.surveyProvider.isTouch) return;
       const device = simulatorDevices[_this.activeDevice];
       options.menuType = device.deviceType === "desktop" ? "dropdown" : (device.deviceType == "tablet" ? "popup" : "overlay");
     });
   }
 
-  constructor() {
+  constructor(private surveyProvider: SurveyCreatorModel) {
     super();
     // if (!!_toolbarHolder) {
     //   this.simulatorOptions.survey = this._toolbarHolder.koSurvey;

diff --git a/packages/survey-creator-core/src/components/tabs/preview.ts b/packages/survey-creator-core/src/components/tabs/preview.ts
@@ -72,7 +72,7 @@ export class PreviewViewModel extends Base {
 
   constructor(protected surveyProvider: SurveyCreatorModel, private startThemeClasses: any = defaultV2Css) {
     super();
-    this.simulator = new SurveySimulatorModel();
+    this.simulator = new SurveySimulatorModel(surveyProvider);
   }
 
   public get isMobileView() {

diff --git a/packages/survey-creator-core/src/components/tabs/test-plugin.ts b/packages/survey-creator-core/src/components/tabs/test-plugin.ts
@@ -151,7 +151,7 @@ export class TabTestPlugin implements ICreatorPlugin {
         iconName: "icon-device-desktop",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
-          return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab);
+          return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
         }),
       }, {
         items: deviceSelectorItems,
@@ -169,7 +169,7 @@ export class TabTestPlugin implements ICreatorPlugin {
         iconName: "icon-device-rotate",
         mode: "small",
         visible: <any>new ComputedUpdater<boolean>(() => {
-          return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab);
+          return notShortCircuitAnd(this.creator.activeTab === "test", this.creator.showSimulatorInTestSurveyTab, !this.creator.isTouch);
         }),
         action: () => {
           this.model.simulator.landscape = !this.model.simulator.landscape;

diff --git a/packages/survey-creator-core/tests/tabs/test.tests.ts b/packages/survey-creator-core/tests/tabs/test.tests.ts
@@ -1,7 +1,7 @@
 import { CreatorTester } from "../creator-tester";
 import { TestSurveyTabViewModel } from "../../src/components/tabs/test";
 import { SurveyResultsItemModel, SurveyResultsModel } from "../../src/components/results";
-import { IAction, ListModel, Question, QuestionDropdownModel, SurveyModel, StylesManager } from "survey-core";
+import { IAction, ListModel, Question, QuestionDropdownModel, SurveyModel, StylesManager, _setIsTouch } from "survey-core";
 import { TabTestPlugin } from "../../src/components/tabs/test-plugin";
 import { SurveySimulatorModel, simulatorDevices } from "../../src/components/simulator";
 import { editorLocalization } from "../../src/editorLocalization";
@@ -233,6 +233,35 @@ test("Show/hide device similator", (): any => {
   similatorAction = creator.toolbar.actions.filter((action) => action.id === "deviceSelector")[0];
   expect(similatorAction).toBeFalsy();
 });
+test("Hide similatorAction on mobile devices", (): any => {
+  let creator: CreatorTester = new CreatorTester();
+  creator.isTouch = true;
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  creator.makeNewViewActive("test");
+  let similatorAction = creator.toolbar.actions.filter((action) => action.id === "deviceSelector")[0];
+  expect(similatorAction).toBeTruthy();
+  expect(similatorAction.visible).toBeFalsy();
+
+  let orientationSelectorAction = creator.toolbar.actions.filter((action) => action.id === "orientationSelector")[0];
+  expect(orientationSelectorAction).toBeTruthy();
+  expect(orientationSelectorAction.visible).toBeFalsy();
+});
+test("Check popup viewType", (): any => {
+  _setIsTouch(true);
+  const creator: CreatorTester = new CreatorTester();
+  const testPlugin: TabTestPlugin = <TabTestPlugin>creator.getPlugin("test");
+  creator.JSON = { elements: [{ type: "dropdown", name: "q1", choices: ["Item1", "Item2", "Item3"] }] };
+  creator.makeNewViewActive("test");
+  const model: TestSurveyTabViewModel = testPlugin.model;
+  const question = <QuestionDropdownModel>model.survey.getAllQuestions()[0];
+  model.survey.onOpenDropdownMenu.add((_, options) => {
+    expect(options.menuType).toEqual("popup");
+  });
+
+  question.dropdownListModel.popupModel.toggleVisibility();
+  expect(question.dropdownListModel.popupModel.isVisible).toBeTruthy();
+  _setIsTouch(false);
+});
 test("pages, PageListItems, makes items enable/disable and do not touch visibility", (): any => {
   var creator = new CreatorTester();
   creator.JSON = {