Add onFocus for action Item (#8524)

surveyjs · Jul 9, 2024 · fedc1b4 · fedc1b4
1 parent e060a2e
commit fedc1b4
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 2 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
@@ -1,5 +1,5 @@
 <ng-template #template>
-  <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">
+  <button type="button" (click)="model.doAction($event)" (mousedown)="model.doMouseDown()" (focus)="model.doFocus($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-vue3-ui/src/components/action-bar/ActionBarItem.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
@@ -12,6 +12,16 @@
         evt.stopPropagation();
       }
     "
+    v-on:mousedown="
+      () => {
+        item.doMouseDown();
+      }
+    "
+    v-on:focus="
+      (event) => {
+        item.doFocus(event);
+      }
+    "
     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
@@ -63,6 +63,7 @@ export interface IAction {
    * [View Demo](https://surveyjs.io/form-library/examples/add-custom-navigation-button/ (linkStyle))
    */
   action?: (context?: any) => void;
+  onFocus?: (isMouse: boolean, event: any) => void;
   /**
    * One or several CSS classes that you want to apply to the outer `<div>` element.
    *
@@ -463,6 +464,7 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
   }) locTooltipName?: string;
   @property() private _enabled: boolean;
   @property() action: (context?: any, isUserAction?: boolean) => void;
+  @property() onFocus: (isMouse: boolean, event: any) => void;
   @property() _component: string;
   @property() items: any;
   @property({
@@ -509,6 +511,17 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner {
     evt.stopPropagation();
     return true;
   }
+  private isMouseDown: boolean;
+  public doMouseDown() : void {
+    this.isMouseDown = true;
+  }
+  public doFocus(args: any): void {
+    if(!!this.onFocus) {
+      const evt = !!args.originalEvent ? args.originalEvent : args;
+      this.onFocus(this.isMouseDown, evt);
+    }
+    this.isMouseDown = false;
+  }
   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.ts b/src/knockout/components/action-bar/action-bar-item.ts
@@ -4,7 +4,14 @@ export let ActionBarItemViewModel: any;
 
 ko.components.register("sv-action-bar-item", {
   viewModel: {
-    createViewModel: (params: any) => {
+    createViewModel: (params: any, componentInfo: any) => {
+      let el = componentInfo.element;
+      el = !!el.nextElementSibling ? el.nextElementSibling : el.parentElement.firstElementChild;
+      if(!!el) {
+        const item = params.item;
+        el.onfocus = function (args: any) { item.doFocus(args); };
+        el.onmousedown = function () { item.doMouseDown(); };
+      }
       return params;
     },
   },

diff --git a/src/react/components/action-bar/action-bar-item.tsx b/src/react/components/action-bar/action-bar-item.tsx
@@ -91,6 +91,8 @@ export class SurveyActionBarItem extends SurveyElementBase<
         className={className}
         type="button"
         disabled={this.item.disabled}
+        onMouseDown={() => this.item.doMouseDown()}
+        onFocus={(args) => this.item.doFocus(args)}
         onClick={(args) => this.item.doAction(args)}
         title={title}
         tabIndex={tabIndex}

diff --git a/src/vue/components/action-bar/action-bar-item.vue b/src/vue/components/action-bar/action-bar-item.vue
@@ -12,6 +12,12 @@
         evt.stopPropagation();
       }
     "
+    v-on:mousedown="
+      () => { item.doMouseDown(); }
+    "
+    v-on:focus="
+      (event) => { item.doFocus(event); }
+    "
     v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:aria-checked="item.ariaChecked"

diff --git a/testCafe/survey/titleActions.js b/testCafe/survey/titleActions.js
@@ -361,3 +361,42 @@ frameworks.forEach((framework) => {
       })()).gt(0);
   });
 });
+
+function addTitleActionForFocus(_, opt) {
+  opt.titleActions = [{
+    title: "main_action",
+    action: () => {},
+    onFocus: (isMouse, event) => {
+      opt.question.value = isMouse ? "focus_mouse" : "focus_keyboard";
+      event.stopPropagation();
+    }
+  }];
+}
+
+frameworks.forEach(async framework => {
+  fixture`${framework} ${title}`
+    .page`${url_test}${themeName}/${framework}`.beforeEach(async (t) => {
+    await applyTheme(themeName);
+  });
+
+  test("Check Action focus", async t => {
+    await initSurvey(framework, {
+      elements: [
+        {
+          type: "text",
+          name: "q1"
+        }
+      ]
+    }, { onGetQuestionTitleActions: addTitleActionForFocus });
+    const action = Selector(".sv-action");
+
+    await t
+      .wait(1000)
+      .click(action)
+      .expect(Selector("input").value).eql("focus_mouse")
+      .pressKey("tab")
+      .expect(Selector("input").value).eql("focus_mouse")
+      .pressKey("shift+tab")
+      .expect(Selector("input").value).eql("focus_keyboard");
+  });
+});