fix: tabs keydown event trigger twice #1947

Author: tangjinzhou

components/_util/vnode.js

@@ -1,5 +1,6 @@
 import { filterEmpty, parseStyleText } from './props-util';
 import classNames from 'classnames';
+import { warning } from '../vc-util/warning';
 
 export function cloneVNode(vnode, deep) {
   const componentOptions = vnode.componentOptions;
@@ -62,6 +63,11 @@ export function cloneElement(n, nodeProps = {}, deep) {
     return null;
   }
   const node = cloneVNode(ele, deep);
+  // 函数式组件不支持clone  https://github.com/vueComponent/ant-design-vue/pull/1947
+  warning(
+    !(node.fnOptions && node.fnOptions.functional),
+    `can not use cloneElement for functional component (${node.tag})`,
+  );
   const { props = {}, key, on = {}, children, directives = [] } = nodeProps;
   const data = node.data || {};
   let cls = {};
@@ -127,10 +133,6 @@ export function cloneElement(n, nodeProps = {}, deep) {
     node.data.on = { ...(node.data.on || {}), ...on };
   }
 
-  if (node.fnOptions && node.fnOptions.functional) {
-    node.data.on = { ...(node.data.on || {}), ...on };
-  }
-
   if (key !== undefined) {
     node.key = key;
     node.data.key = key;

components/tabs/TabBar.jsx

@@ -1,9 +1,25 @@
 import Icon from '../icon';
 import ScrollableInkTabBar from '../vc-tabs/src/ScrollableInkTabBar';
 import { cloneElement } from '../_util/vnode';
+import PropTypes from '../_util/vue-types';
+import { getListeners } from '../_util/props-util';
 const TabBar = {
-  functional: true,
-  render(h, context) {
+  name: 'TabBar',
+  inheritAttrs: false,
+  props: {
+    prefixCls: PropTypes.string,
+    tabBarStyle: PropTypes.object,
+    tabBarExtraContent: PropTypes.any,
+    type: PropTypes.oneOf(['line', 'card', 'editable-card']),
+    tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),
+    tabBarPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+    size: PropTypes.oneOf(['default', 'small', 'large']),
+    animated: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+    renderTabBar: PropTypes.func,
+    panels: PropTypes.array.def([]),
+    activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  },
+  render() {
     const {
       tabBarStyle,
       animated = true,
@@ -13,7 +29,7 @@ const TabBar = {
       prefixCls,
       type = 'line',
       size,
-    } = context.props;
+    } = this.$props;
     const inkBarAnimated = typeof animated === 'object' ? animated.inkBar : animated;
 
     const isVertical = tabPosition === 'left' || tabPosition === 'right';
@@ -39,14 +55,15 @@ const TabBar = {
 
     const renderProps = {
       props: {
-        ...context.props,
+        ...this.$props,
+        ...this.$attrs,
         inkBarAnimated,
         extraContent: tabBarExtraContent,
         prevIcon,
         nextIcon,
       },
       style: tabBarStyle,
-      on: context.listeners,
+      on: getListeners(this),
       class: cls,
     };
 
@@ -58,7 +75,7 @@ const TabBar = {
       RenderTabBar = <ScrollableInkTabBar {...renderProps} />;
     }
 
-    return cloneElement(RenderTabBar, renderProps);
+    return cloneElement(RenderTabBar);
   },
 };
 

components/tabs/tabs.jsx

@@ -26,12 +26,7 @@ export default {
     defaultActiveKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     hideAdd: PropTypes.bool.def(false),
     tabBarStyle: PropTypes.object,
-    tabBarExtraContent: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number,
-      PropTypes.func,
-      PropTypes.array,
-    ]),
+    tabBarExtraContent: PropTypes.any,
     destroyInactiveTabPane: PropTypes.bool.def(false),
     type: PropTypes.oneOf(['line', 'card', 'editable-card']),
     tabPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).def('top'),