From ae34f0f26f6f5b3e30dabde8680cb0f12f57751c Mon Sep 17 00:00:00 2001
From: Andrew <andrew.telnov@gmail.com>
Date: Fri, 5 Jul 2024 18:02:32 +0300
Subject: [PATCH] Do not focus creator elements in designer (#8516)

---
 .../components/action-bar/action-bar-item.component.html   | 2 +-
 .../survey-angular-ui/src/utils/ng-key2click.directive.ts  | 5 +++++
 .../src/components/action-bar/ActionBarItem.vue            | 7 ++++++-
 src/actions/action.ts                                      | 7 +++++++
 src/knockout/components/action-bar/action-bar-item.html    | 2 +-
 src/knockout/kosurvey.ts                                   | 1 +
 src/react/components/action-bar/action-bar-item.tsx        | 2 +-
 src/react/reactSurvey.tsx                                  | 3 ++-
 src/vue/components/action-bar/action-bar-item.vue          | 7 ++++++-
 9 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/survey-angular-ui/src/components/action-bar/action-bar-item.component.html b/packages/survey-angular-ui/src/components/action-bar/action-bar-item.component.html
index 4188bd32ad..5af4028d99 100644
--- a/packages/survey-angular-ui/src/components/action-bar/action-bar-item.component.html
+++ b/packages/survey-angular-ui/src/components/action-bar/action-bar-item.component.html
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <button type="button" (click)="model.action(model, model.getIsTrusted($event))" [key2click]="{ processEsc: false, disableTabStop: model.disableTabStop }" [class]="model.getActionBarItemCss()" [attr.title]="model.tooltip || model.title" [attr.aria-checked]="model.ariaChecked" [attr.aria-expanded]="model.ariaExpanded" [attr.role]="model.ariaRole" [disabled]="model.disabled">
+  <button type="button" (click)="model.doAction($event)" [key2click]="{ processEsc: false, disableTabStop: model.disableTabStop }" [class]="model.getActionBarItemCss()" [attr.title]="model.tooltip || model.title" [attr.aria-checked]="model.ariaChecked" [attr.aria-expanded]="model.ariaExpanded" [attr.role]="model.ariaRole" [disabled]="model.disabled">
     <svg *ngIf="model.iconName" [iconName]="model.iconName" [size]="model.iconSize" [title]="model.tooltip || model.title" [class]="model.cssClasses.itemIcon" sv-ng-svg-icon></svg>
     <span *ngIf="model.hasTitle" [class]="model.getActionBarItemTitleCss()">{{ model.title }}</span>
   </button>
diff --git a/packages/survey-angular-ui/src/utils/ng-key2click.directive.ts b/packages/survey-angular-ui/src/utils/ng-key2click.directive.ts
index df92d52d53..8889877cac 100644
--- a/packages/survey-angular-ui/src/utils/ng-key2click.directive.ts
+++ b/packages/survey-angular-ui/src/utils/ng-key2click.directive.ts
@@ -23,6 +23,9 @@ export class Key2ClickDirective implements OnChanges, OnDestroy {
   private blur (evt: any) {
     doKey2ClickBlur(evt);
   }
+  private focus (evt: any) {
+    evt.stopPropagation();
+  }
   constructor(private el: ElementRef) {
     this.subscribeEventListeners();
   }
@@ -38,6 +41,7 @@ export class Key2ClickDirective implements OnChanges, OnDestroy {
     this.element.addEventListener("keyup", this.onkeyup.bind(this));
     this.element.addEventListener("keydown", this.onkeydown.bind(this));
     this.element.addEventListener("blur", this.blur);
+    this.element.addEventListener("focus", this.focus);
 
     this.isSubscribed = true;
   }
@@ -48,6 +52,7 @@ export class Key2ClickDirective implements OnChanges, OnDestroy {
     this.element.removeEventListener("keyup", this.onkeyup.bind(this));
     this.element.removeEventListener("keydown", this.onkeydown.bind(this));
     this.element.removeEventListener("blur", this.blur);
+    this.element.removeEventListener("focus", this.focus);
 
     this.isSubscribed = false;
   }
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
index d510ef00ab..50dd09c614 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
@@ -4,7 +4,7 @@
     type="button"
     v-on:click="
       (args: any) => {
-        item.action(item, !!args.pointerType);
+        item.doAction(args);
       }
     "
     v-on:keyup="
@@ -12,6 +12,11 @@
         evt.stopPropagation();
       }
     "
+    v-on:focus="
+      (evt) => {
+        evt.stopPropagation();
+      }
+    "
     v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:aria-checked="item.ariaChecked"
diff --git a/src/actions/action.ts b/src/actions/action.ts
index b1b9b9c781..87697c28a4 100644
--- a/src/actions/action.ts
+++ b/src/actions/action.ts
@@ -502,6 +502,13 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
     this.locTooltipChanged();
     this.locStrChangedInPopupModel();
   }
+  public doAction(args: any): boolean {
+    const evt = !!args.originalEvent ? args.originalEvent : args;
+    this.action(this, evt.isTrusted);
+    evt.preventDefault();
+    evt.stopPropagation();
+    return true;
+  }
   private locStrChangedInPopupModel(): void {
     if (!this.popupModel || !this.popupModel.contentComponentData || !this.popupModel.contentComponentData.model) return;
     const model = this.popupModel.contentComponentData.model;
diff --git a/src/knockout/components/action-bar/action-bar-item.html b/src/knockout/components/action-bar/action-bar-item.html
index 8f71a1010b..c8829db62e 100644
--- a/src/knockout/components/action-bar/action-bar-item.html
+++ b/src/knockout/components/action-bar/action-bar-item.html
@@ -1,7 +1,7 @@
 <!-- ko with: $data.item -->
 <button
   type="button"
-  data-bind="click: function(s, args) { $data.action($data, getIsTrusted(args)); }, key2click: { processEsc: false }, disable: $data.disabled, css: getActionBarItemCss(), attr: { title: $data.tooltip || $data.title, 'aria-checked': $data.ariaChecked, 'role': $data.ariaRole, 'aria-expanded': typeof $data.ariaExpanded === 'undefined' ? null : ($data.ariaExpanded ? 'true': 'false') }"
+  data-bind="click: function(s, args) { $data.doAction(args); }, key2click: { processEsc: false }, disable: $data.disabled, css: getActionBarItemCss(), attr: { title: $data.tooltip || $data.title, 'aria-checked': $data.ariaChecked, 'role': $data.ariaRole, 'aria-expanded': typeof $data.ariaExpanded === 'undefined' ? null : ($data.ariaExpanded ? 'true': 'false') }"
 >
   <!-- ko if: $data.iconName -->
   <!-- ko component: { name: 'sv-svg-icon', params: { css: $data.cssClasses.itemIcon, iconName: iconName, size: iconSize, title: $data.tooltip || $data.title } } --><!-- /ko -->
diff --git a/src/knockout/kosurvey.ts b/src/knockout/kosurvey.ts
index 3dcec43418..61ba0fd781 100644
--- a/src/knockout/kosurvey.ts
+++ b/src/knockout/kosurvey.ts
@@ -320,5 +320,6 @@ ko.bindingHandlers["key2click"] = {
     };
     element.onkeydown = (evt: any) => doKey2ClickDown(evt, options);
     element.onblur = (evt: any) => doKey2ClickBlur(evt);
+    element.onfocus = (evt: any) => evt.stopPropagation();
   },
 };
diff --git a/src/react/components/action-bar/action-bar-item.tsx b/src/react/components/action-bar/action-bar-item.tsx
index af4d51a65f..56cdbd82f0 100644
--- a/src/react/components/action-bar/action-bar-item.tsx
+++ b/src/react/components/action-bar/action-bar-item.tsx
@@ -91,7 +91,7 @@ export class SurveyActionBarItem extends SurveyElementBase<
         className={className}
         type="button"
         disabled={this.item.disabled}
-        onClick={(args) => this.item.action(this.item, this.item.getIsTrusted(args))}
+        onClick={(args) => this.item.doAction(args)}
         title={title}
         tabIndex={tabIndex}
         aria-checked={this.item.ariaChecked}
diff --git a/src/react/reactSurvey.tsx b/src/react/reactSurvey.tsx
index f5c0e21e3c..e404c8f83b 100644
--- a/src/react/reactSurvey.tsx
+++ b/src/react/reactSurvey.tsx
@@ -319,7 +319,8 @@ export function attachKey2click(element: JSX.Element, viewModel?: any, options:
         return false;
       },
       onKeyDown: (evt: any) => doKey2ClickDown(evt, options),
-      onBlur: (evt: any) => doKey2ClickBlur(evt)
+      onBlur: (evt: any) => doKey2ClickBlur(evt),
+      onFocus: (evt: any) => evt.stopPropagation()
     }
   );
 }
\ No newline at end of file
diff --git a/src/vue/components/action-bar/action-bar-item.vue b/src/vue/components/action-bar/action-bar-item.vue
index 9c5587fe29..09821fe5d9 100644
--- a/src/vue/components/action-bar/action-bar-item.vue
+++ b/src/vue/components/action-bar/action-bar-item.vue
@@ -4,7 +4,7 @@
     type="button"
     v-on:click="
       (args) => {
-        item.action(item, !!args.pointerType);
+        item.doAction(args);
       }
     "
     v-on:keyup="
@@ -12,6 +12,11 @@
         evt.stopPropagation();
       }
     "
+    v-on:focus="
+      (evt) => {
+        evt.stopPropagation();
+      }
+    "
     v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:aria-checked="item.ariaChecked"