From 613d25f8a05e21f8b8ffb9a14a18ef3845f618a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B4=96=E5=B4=96=E5=B4=96?= <bubkoo.wy@gmail.com>
Date: Fri, 29 May 2020 17:27:49 +0800
Subject: [PATCH] fix: do not set tabindex attr when keyboard is disabled

---
 .../x6-example-features/src/pages/stencil/index.tsx  |  4 +---
 packages/x6/src/graph/keyboard.ts                    | 12 ++++++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/examples/x6-example-features/src/pages/stencil/index.tsx b/examples/x6-example-features/src/pages/stencil/index.tsx
index 4559cf90cb3..133475076cd 100644
--- a/examples/x6-example-features/src/pages/stencil/index.tsx
+++ b/examples/x6-example-features/src/pages/stencil/index.tsx
@@ -43,7 +43,7 @@ export default class Example extends React.Component<
     const stencil = new Stencil({
       target: graph,
       width: 200,
-      height: 600,
+      height: 300,
       search: true,
       collapsable: true,
       snapline: graph.snapline.widget,
@@ -51,11 +51,9 @@ export default class Example extends React.Component<
       groups: [
         {
           name: 'group1',
-          height: 300,
         },
         {
           name: 'group2',
-          height: 300,
         },
       ],
     })
diff --git a/packages/x6/src/graph/keyboard.ts b/packages/x6/src/graph/keyboard.ts
index 4a900d780e1..90d373ccf39 100644
--- a/packages/x6/src/graph/keyboard.ts
+++ b/packages/x6/src/graph/keyboard.ts
@@ -22,8 +22,10 @@ export class Keyboard extends Disposable implements IDisablable {
       this.target = document
     } else {
       this.target = this.container
-      // ensure the container focusable
-      this.target.setAttribute('tabindex', '-1')
+      if (!this.disabled) {
+        // ensure the container focusable
+        this.target.setAttribute('tabindex', '-1')
+      }
     }
 
     this.mousetrap = new Keyboard.Mousetrap(this.target as Element, this)
@@ -37,6 +39,9 @@ export class Keyboard extends Disposable implements IDisablable {
     if (this.disabled) {
       this.options.enabled = true
       this.graph.options.keyboard.enabled = true
+      if (this.target instanceof HTMLElement) {
+        this.target.setAttribute('tabindex', '-1')
+      }
     }
   }
 
@@ -44,6 +49,9 @@ export class Keyboard extends Disposable implements IDisablable {
     if (!this.disabled) {
       this.options.enabled = false
       this.graph.options.keyboard.enabled = false
+      if (this.target instanceof HTMLElement) {
+        this.target.removeAttribute('tabindex')
+      }
     }
   }