PR: CREATOR: Safari: Unexpected page's focus.

packages/survey-creator-angular/src/creator.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="!creator.isCreatorDisposed">
   <sv-ng-modal-container></sv-ng-modal-container>
   <div class="svc-creator" [class.svc-creator--mobile]="creator.isMobileView"
-    [class.svc-creator--touch]="creator.isTouch" #container>
+    [class.svc-creator--touch]="creator.isTouch" [class.svc-creator--dragging]="creator.isDragging" #container>
     <div>
       <sv-svg-bundle></sv-svg-bundle>
     </div>

packages/survey-creator-core/src/components/creator.scss

@@ -46,6 +46,13 @@ survey-creator,
   }
 }
 
+.svc-creator--dragging {
+  [contenteditable="true"] {
+    /* Safari issue https://github.com/surveyjs/survey-creator/issues/5740 */
+    pointer-events: none;
+  }
+}
+
 survey-creator {
   .sv-drag-drop-choices-shortcut {
     .sv-drag-drop-choices-shortcut__content {
@@ -56,6 +63,7 @@ survey-creator {
   }
 }
 
+
 .svc-creator__area {
   position: relative;
 

packages/survey-creator-core/src/creator-base.ts

@@ -1879,6 +1879,7 @@ export class SurveyCreatorModel extends Base
       isDraggedFromToolbox = !sender.draggedElement.parent;
       this.onDragStart.fire(this, options);
       this.startUndoRedoTransaction("drag drop");
+      this.isDragging = true;
     });
     this.dragDropSurveyElements.onDragEnd.add((sender, options) => {
       this.stopUndoRedoTransaction();
@@ -1889,6 +1890,7 @@ export class SurveyCreatorModel extends Base
       if (!options.fromElement) {
         this.setModified({ type: "ADDED_FROM_TOOLBOX", question: options.draggedElement });
       }
+      this.isDragging = false;
     });
   }
   private initDragDropChoices() {
@@ -3762,6 +3764,7 @@ export class SurveyCreatorModel extends Base
     }
   }) isMobileView: boolean;
   @property({ defaultValue: false }) isTouch;
+  @property({ defaultValue: false }) isDragging;
   /**
    * Specifies the Toolbox location.
    * 

packages/survey-creator-knockout/src/survey-creator.html

@@ -1,6 +1,6 @@
 <!-- ko ifnot: creator.isCreatorDisposed -->
 <div class="svc-creator"
-  data-bind="css: {'svc-creator--mobile' : creator.isMobileView, 'svc-creator--touch' : creator.isTouch }">
+  data-bind="css: {'svc-creator--mobile' : creator.isMobileView, 'svc-creator--touch' : creator.isTouch, 'svc-creator--dragging' : creator.isDragging }">
   <div>
     <!-- ko component: { name: 'sv-svg-bundle'} -->
     <!-- /ko -->

packages/survey-creator-react/src/SurveyCreator.tsx

@@ -49,11 +49,11 @@ export class SurveyCreatorComponent extends SurveyElementBase<
 
   componentDidUpdate(prevProps: any, prevState: any): void {
     super.componentDidUpdate(prevProps, prevState);
-    if(this.creator !== prevProps.creator) {
-      if(prevProps.creator) {
+    if (this.creator !== prevProps.creator) {
+      if (prevProps.creator) {
         prevProps.creator.unsubscribeRootElement();
       }
-      if(this.creator && this.rootNode.current) {
+      if (this.creator && this.rootNode.current) {
         this.creator.setRootElement(this.rootNode.current);
       }
     }
@@ -72,7 +72,7 @@ export class SurveyCreatorComponent extends SurveyElementBase<
   renderElement() {
     const creator: SurveyCreatorModel = this.props.creator;
     if (creator.isCreatorDisposed) return null;
-    const creatorClassName = "svc-creator" + (this.props.creator.isMobileView ? " svc-creator--mobile" : "") + (this.props.creator.isTouch ? " svc-creator--touch" : "");
+    const creatorClassName = "svc-creator" + (this.props.creator.isMobileView ? " svc-creator--mobile" : "") + (this.props.creator.isTouch ? " svc-creator--touch" : "") + (this.props.creator.isDragging ? " svc-creator--dragging" : "");
     const areaClassName = "svc-full-container svc-creator__area svc-flex-column" + (this.props.creator.haveCommercialLicense ? "" : " svc-creator__area--with-banner");
     const contentWrapperClassName = "svc-creator__content-wrapper svc-flex-row" + (this.props.creator.isMobileView ? " svc-creator__content-wrapper--footer-toolbar" : "");
     const fullContainerClassName = "svc-flex-row svc-full-container" + (" svc-creator__side-bar--" + this.creator.sidebarLocation);

packages/survey-creator-vue/src/Creator.vue

@@ -1,66 +1,40 @@
 <template>
   <template v-if="!model.isCreatorDisposed">
     <survey-popup-modal></survey-popup-modal>
-    <div
-      class="svc-creator"
-      :class="{
-        'svc-creator--mobile': model.isMobileView,
-      }"
-      ref="root"
-    >
+    <div class="svc-creator" :class="{
+    'svc-creator--mobile': model.isMobileView,
+    'svc-creator--dragging': model.isDragging,
+  }" ref="root">
       <div>
         <sv-svg-bundle></sv-svg-bundle>
       </div>
-      <div
-        class="svc-full-container svc-creator__area svc-flex-column"
-        :class="{
-          'svc-creator__area--with-banner': !model.haveCommercialLicense,
-        }"
-      >
-        <div
-          class="svc-flex-row svc-full-container"
-          :class="{
-            'svc-creator__side-bar--left': model.sidebarLocation == 'left',
-          }"
-        >
-          <div
-            class="svc-flex-column svc-flex-row__element svc-flex-row__element--growing"
-          >
+      <div class="svc-full-container svc-creator__area svc-flex-column" :class="{
+    'svc-creator__area--with-banner': !model.haveCommercialLicense,
+  }">
+        <div class="svc-flex-row svc-full-container" :class="{
+    'svc-creator__side-bar--left': model.sidebarLocation == 'left',
+  }">
+          <div class="svc-flex-column svc-flex-row__element svc-flex-row__element--growing">
             <div class="svc-top-bar">
               <div class="svc-tabbed-menu-wrapper" v-show="model.showTabs">
                 <svc-tabbed-menu :model="model.tabbedMenu"></svc-tabbed-menu>
               </div>
-              <div
-                v-if="model.showToolbar"
-                class="svc-toolbar-wrapper"
-                :v-show="model.showToolbar"
-              >
+              <div v-if="model.showToolbar" class="svc-toolbar-wrapper" :v-show="model.showToolbar">
                 <sv-action-bar :model="model.toolbar"></sv-action-bar>
               </div>
             </div>
-            <div
-              class="svc-creator__content-wrapper svc-flex-row"
-              :class="{
-                'svc-creator__content-wrapper--footer-toolbar':
-                  model.isMobileView,
-              }"
-            >
+            <div class="svc-creator__content-wrapper svc-flex-row" :class="{
+    'svc-creator__content-wrapper--footer-toolbar':
+      model.isMobileView,
+  }">
               <div class="svc-creator__content-holder svc-flex-column">
                 <template v-for="tab in model.tabs">
-                  <div
-                    class="svc-creator-tab"
-                    v-bind:key="tab.id"
-                    v-if="model.viewType == tab.id && tab.visible"
-                    :id="'scrollableDiv-' + tab.id"
-                    :class="{
-                      'svc-creator__toolbox--right':
-                        model.toolboxLocation == 'right',
-                    }"
-                  >
-                    <component
-                      :is="tab.componentContent"
-                      :model="tab.data.model"
-                    ></component>
+                  <div class="svc-creator-tab" v-bind:key="tab.id" v-if="model.viewType == tab.id && tab.visible"
+                    :id="'scrollableDiv-' + tab.id" :class="{
+    'svc-creator__toolbox--right':
+      model.toolboxLocation == 'right',
+  }">
+                    <component :is="tab.componentContent" :model="tab.data.model"></component>
                   </div>
                 </template>
               </div>
@@ -71,18 +45,12 @@
               </div>
             </div>
           </div>
-          <div
-            v-if="model.sidebar"
-            :class="{ 'sv-mobile-side-bar': model.isMobileView }"
-          >
+          <div v-if="model.sidebar" :class="{ 'sv-mobile-side-bar': model.isMobileView }">
             <svc-side-bar :model="model.sidebar"></svc-side-bar>
           </div>
         </div>
         <div class="svc-creator__banner" v-if="!model.haveCommercialLicense">
-          <span
-            class="svc-creator__non-commercial-text"
-            v-html="model.licenseText"
-          ></span>
+          <span class="svc-creator__non-commercial-text" v-html="model.licenseText"></span>
         </div>
         <sv-notifier :model="model.notifier"></sv-notifier>
       </div>