Merge pull request #3642 from SergioCrisostomo/tabs-keyboard

Correct logic for selecting by keyboard

examples/routers/tabs.vue

@@ -176,18 +176,39 @@
             <TabPane label="标签二" disabled>标签二的内容</TabPane>
             <TabPane label="标签三">标签三的内容</TabPane>
         </Tabs>
+        <tabs v-model="name" type="card" @on-click="handleClick">
+            <tab-pane name="a" label="标签一">
+                <div>1</div>
+            </tab-pane>
+            <tab-pane name="b" label="标签二">
+                <div>2</div>
+            </tab-pane>
+            <tab-pane name="c" label="标签三">
+                <div>3</div>
+            </tab-pane>
+            <tab-pane name="d" label="标签四">
+                <div>4</div>
+            </tab-pane>
+            <tab-pane name="e" label="标签五">
+                <div>5</div>
+            </tab-pane>
+        </tabs>
     </div>
 </template>
 <script>
     export default {
         data () {
             return {
-                tabs: 2
+                tabs: 2,
+                name: 'b',
             }
         },
         methods: {
             handleTabsAdd () {
                 this.tabs ++;
+            },
+            handleClick (name) {
+                console.log(name);
             }
         }
     }

src/components/tabs/tabs.vue

@@ -7,7 +7,7 @@
                 tabindex="0"
                 ref="navContainer"
                 @keydown="handleTabKeyNavigation"
-                @keydown.space.prevent="handleTabKeyboardSelect"
+                @keydown.space.prevent="handleTabKeyboardSelect(false)"
             >
                 <div ref="navWrap" :class="[prefixCls + '-nav-wrap', scrollable ? prefixCls + '-nav-scrollable' : '']">
                     <span :class="[prefixCls + '-nav-prev', scrollable ? '' : prefixCls + '-nav-scroll-disabled']" @click="scrollPrev"><Icon type="chevron-left"></Icon></span>
@@ -236,22 +236,11 @@
                 const nextTab = getNextTab(this.navList, this.focusedKey, direction);
                 this.focusedKey = nextTab.name;
             },
-            handleTabKeyboardSelect(){
+            handleTabKeyboardSelect(init = false){
-                this.activeKey = this.focusedKey || 0;
+                if (init) return;
-                const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
+                const focused = this.focusedKey || 0;
-
+                const index = this.navList.findIndex(({name}) => name === focused);
-                [...this.$refs.panes.children].forEach((el, i) => {
+                this.handleChange(index);
-                    if (nextIndex === i) {
-                        [...el.children].forEach(child => child.style.display = 'block');
-                        setTimeout(() => {
-                            focusFirst(el, el);
-                        }, transitionTime);
-                    } else {
-                        setTimeout(() => {
-                            [...el.children].forEach(child => child.style.display = 'none');
-                        }, transitionTime);
-                    }
-                });
             },
             handleRemove (index) {
                 const tabs = this.getTabs();
@@ -394,6 +383,21 @@
                 this.$nextTick(() => {
                     this.scrollToActiveTab();
                 });
+
+                // update visibility
+                const nextIndex = Math.max(this.navList.findIndex(tab => tab.name === this.focusedKey), 0);
+                [...this.$refs.panes.children].forEach((el, i) => {
+                    if (nextIndex === i) {
+                        [...el.children].forEach(child => child.style.display = 'block');
+                        setTimeout(() => {
+                            focusFirst(el, el);
+                        }, transitionTime);
+                    } else {
+                        setTimeout(() => {
+                            [...el.children].forEach(child => child.style.display = 'none');
+                        }, transitionTime);
+                    }
+                });
             }
         },
         mounted () {
@@ -413,7 +417,7 @@
                 this.mutationObserver.observe(hiddenParentNode, { attributes: true, childList: true, characterData: true, attributeFilter: ['style'] });
             }
 
-            this.handleTabKeyboardSelect();
+            this.handleTabKeyboardSelect(true);
         },
         beforeDestroy() {
             this.observer.removeListener(this.$refs.navWrap, this.handleResize);