resolve #5997 New property grid category doesn't support navigation (#…

…6045) Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Nov 7, 2024 · bc3b498 · bc3b498
1 parent 663361c
commit bc3b498
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 31 deletions.
diff --git a/packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html b/packages/survey-creator-angular/src/side-bar/side-bar-property-grid-header.component.html
@@ -1,8 +1,8 @@
 <ng-template #template>
   <div class="svc-sidebar__header svc-sidebar__header--tabbed">
     <div class="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle">
-      <div class="svc-sidebar__header-content" (click)="model.action()">
-        <div [class]="model.buttonClassName">
+      <div class="svc-sidebar__header-content">
+        <div [class]="model.buttonClassName" (click)="model.action()" [key2click]="{ processEsc: false }">
           <div class="svc-sidebar__header-caption">
             <span class="svc-sidebar__header-title">{{model.title}}</span>
             <span class="svc-sidebar__header-subtitle">{{model.tooltip}}</span>

diff --git a/packages/survey-creator-angular/src/side-bar/tab-button.component.html b/packages/survey-creator-angular/src/side-bar/tab-button.component.html
@@ -1,6 +1,7 @@
 <ng-template #template>
   <div class="svc-menu-action">
-    <div [class]="model.buttonClassName" [attr.title]="model.tooltip" (click)="model.action()">
+    <div [class]="model.buttonClassName" [key2click]="{ processEsc: false, disableTabStop: model.disableTabStop }"
+      [attr.title]="model.tooltip" (click)="model.action()">
       <div class="svc-menu-action__icon">
         <div class="svc-menu-action__icon-container">
           <svg [iconName]="model.iconName" [size]="24" sv-ng-svg-icon></svg>

diff --git a/packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html b/packages/survey-creator-knockout/src/side-bar/side-bar-property-grid-header.html
@@ -1,8 +1,8 @@
 <div class="svc-sidebar__header svc-sidebar__header--tabbed">
   <div class="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle">
-    <div class="svc-sidebar__header-content"
-      data-bind="click: function(s, args) { $data.model.action($data); }, key2click: { processEsc: false }">
-      <div data-bind="css: $data.model.buttonClassName">
+    <div class="svc-sidebar__header-content">
+      <div data-bind="css: $data.model.buttonClassName, 
+      click: function(s, args) { $data.model.action($data); }, key2click: { processEsc: false }">
         <div class="svc-sidebar__header-caption">
           <span class="svc-sidebar__header-title" data-bind="text: model.title"></span>
           <span class="svc-sidebar__header-subtitle" data-bind="text: model.tooltip"></span>

diff --git a/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx b/packages/survey-creator-react/src/side-bar/SideBarPropertyGridHeader.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Base, getActionDropdownButtonTarget } from "survey-core";
-import { SurveyElementBase, ReactElementFactory, Popup } from "survey-react-ui";
+import { SurveyElementBase, ReactElementFactory, Popup, attachKey2click } from "survey-react-ui";
 import { MenuButton } from "survey-creator-core";
 
 interface ISideBarPropertyGridHeaderProps {
@@ -17,16 +17,20 @@ class SideBarPropertyGridHeader extends SurveyElementBase<ISideBarPropertyGridHe
   }
 
   renderElement(): JSX.Element {
+    const button = attachKey2click(
+      <div className={this.objectSelectionAction.buttonClassName} onClick={() => this.objectSelectionAction.action()}>
+        <div className="svc-sidebar__header-caption">
+          <span className="svc-sidebar__header-title">{this.objectSelectionAction.title}</span>
+          <span className="svc-sidebar__header-subtitle">{this.objectSelectionAction.tooltip}</span>
+        </div>
+      </div>, this.props.model
+    );
+
     return (
       <div className="svc-sidebar__header svc-sidebar__header--tabbed">
         <div className="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle">
-          <div className="svc-sidebar__header-content" onClick={() => this.objectSelectionAction.action()}>
-            <div className={this.objectSelectionAction.buttonClassName}>
-              <div className="svc-sidebar__header-caption">
-                <span className="svc-sidebar__header-title">{this.objectSelectionAction.title}</span>
-                <span className="svc-sidebar__header-subtitle">{this.objectSelectionAction.tooltip}</span>
-              </div>
-            </div>
+          <div className="svc-sidebar__header-content">
+            {button}
             <Popup model={this.objectSelectionAction.popupModel} getTarget={getActionDropdownButtonTarget}></Popup>
           </div>
         </div>

diff --git a/packages/survey-creator-react/src/side-bar/TabButton.tsx b/packages/survey-creator-react/src/side-bar/TabButton.tsx
@@ -1,7 +1,7 @@
 
 import * as React from "react";
 import { Base } from "survey-core";
-import { SurveyElementBase, SvgIcon } from "survey-react-ui";
+import { attachKey2click, SurveyElementBase, SvgIcon } from "survey-react-ui";
 import { MenuButton } from "survey-creator-core";
 
 export class TabButtonComponent extends SurveyElementBase<{ model: MenuButton }, any> {
@@ -14,19 +14,22 @@ export class TabButtonComponent extends SurveyElementBase<{ model: MenuButton },
   }
 
   protected renderElement(): JSX.Element | null {
-    return (
-      <div className="svc-menu-action">
-        <div
-          className={this.props.model.buttonClassName}
-          title={this.props.model.tooltip}
-          onClick={() => { this.props.model.action(); }}
-        >
-          <div className="svc-menu-action__icon">
-            <div className="svc-menu-action__icon-container">
-              <SvgIcon iconName={this.props.model.iconName} size={24}></SvgIcon>
-            </div>
+    const button = attachKey2click(
+      <div
+        className={this.props.model.buttonClassName}
+        title={this.props.model.tooltip}
+        onClick={() => { this.props.model.action(); }}
+      >
+        <div className="svc-menu-action__icon">
+          <div className="svc-menu-action__icon-container">
+            <SvgIcon iconName={this.props.model.iconName} size={24}></SvgIcon>
           </div>
         </div>
+      </div>, this.props.model
+    );
+    return (
+      <div className="svc-menu-action">
+        {button}
       </div>
     );
   }

diff --git a/packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue b/packages/survey-creator-vue/src/side-bar/SideBarPropertyGridHeader.vue
@@ -3,13 +3,15 @@
     <div
       class="svc-sidebar__header-container svc-sidebar__header-container--with-subtitle"
     >
-      <div class="svc-sidebar__header-content" @click="model.action()">
-        <div :class="model.buttonClassName">
+      <div class="svc-sidebar__header-content">
+        <div
+          :class="model.buttonClassName"
+          v-key2click="{ processEsc: false }"
+          @click="model.action()"
+        >
           <div class="svc-sidebar__header-caption">
             <span class="svc-sidebar__header-title">{{ model.title }}</span>
-            <span class="svc-sidebar__header-subtitle">{{
-              model.tooltip
-            }}</span>
+            <span class="svc-sidebar__header-subtitle">{{ model.tooltip }}</span>
           </div>
         </div>
         <SvComponent :is="'sv-popup'" :model="model.popupModel"></SvComponent>

diff --git a/packages/survey-creator-vue/src/side-bar/TabButton.vue b/packages/survey-creator-vue/src/side-bar/TabButton.vue
@@ -4,6 +4,7 @@
       :class="model.buttonClassName"
       :title="model.tooltip"
       @click="model.action()"
+      v-key2click="{ processEsc: false, disableTabStop: model.disableTabStop }"
     >
       <div class="svc-menu-action__icon">
         <div class="svc-menu-action__icon-container">