Do not focus creator elements in designer (#8516)

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>

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;
   }

packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue

@@ -4,14 +4,19 @@
     type="button"
     v-on:click="
       (args: any) => {
-        item.action(item, !!args.pointerType);
+        item.doAction(args);
       }
     "
     v-on:keyup="
       (evt) => {
         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"

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;

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 -->

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();
   },
 };

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}

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()
     }
   );
 }

src/vue/components/action-bar/action-bar-item.vue

@@ -4,14 +4,19 @@
     type="button"
     v-on:click="
       (args) => {
-        item.action(item, !!args.pointerType);
+        item.doAction(args);
       }
     "
     v-on:keyup="
       (evt) => {
         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"