fix: do not set tabindex attr when keyboard is disabled

antvis · Jun 1, 2020 · 613d25f · 613d25f
1 parent 8eb9877
commit 613d25f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/examples/x6-example-features/src/pages/stencil/index.tsx b/examples/x6-example-features/src/pages/stencil/index.tsx
@@ -43,19 +43,17 @@ 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,
       grid: 1,
       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
@@ -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,13 +39,19 @@ 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')
+      }
     }
   }
 
   disable() {
     if (!this.disabled) {
       this.options.enabled = false
       this.graph.options.keyboard.enabled = false
+      if (this.target instanceof HTMLElement) {
+        this.target.removeAttribute('tabindex')
+      }
     }
   }