fix: nav lacking key warning, when limitIndent false #679 (#680)

cypress/integration/datePicker.spec.js

@@ -102,7 +102,7 @@ describe('DatePicker', () => {
     /**
      * 测试 open 受控时，点击面板内按钮关闭面板后，输入框应该清除 focus 状态
      */
-    it.only('input range focus when open is controlled', () => {
+    it('input range focus when open is controlled', () => {
         cy.visit('http://localhost:6006/iframe.html?id=datepicker--fix-input-range-focus&args=&viewMode=story');
         cy.get('.semi-datepicker-range-input-wrapper-start > .semi-input-wrapper').click();
         cy.get('.semi-datepicker-day').contains('10')
@@ -120,4 +120,4 @@ describe('DatePicker', () => {
                 cy.get('.semi-datepicker-range-input-wrapper-end').should('not.have.class', 'semi-datepicker-range-input-wrapper-active');
             });
     });
-});
+});

packages/semi-ui/navigation/Item.tsx

@@ -4,12 +4,16 @@ import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import React from 'react';
 import PropTypes from 'prop-types';
 import cls from 'classnames';
-import { times, noop } from 'lodash';
+import { noop, times } from 'lodash';
 
 import isNullOrUndefined from '@douyinfe/semi-foundation/utils/isNullOrUndefined';
 import { cloneDeep, isSemiIcon } from '../_utils';
-import ItemFoundation, { ItemProps, SelectedItemProps, ItemAdapter } from '@douyinfe/semi-foundation/navigation/itemFoundation';
-import { strings, cssClasses } from '@douyinfe/semi-foundation/navigation/constants';
+import ItemFoundation, {
+    ItemAdapter,
+    ItemProps,
+    SelectedItemProps
+} from '@douyinfe/semi-foundation/navigation/itemFoundation';
+import { cssClasses, strings } from '@douyinfe/semi-foundation/navigation/constants';
 
 import Tooltip from '../tooltip';
 import NavContext from './nav-context';
@@ -114,7 +118,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         };
     }
 
-    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false) {
+    renderIcon(icon: React.ReactNode, pos: string, isToggleIcon = false, key: number | string = 0) {
         if (this.props.isSubNav) {
             return null;
         }
@@ -134,8 +138,8 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         });
 
         return (
-            <i className={className}>
-                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), {size: (icon as React.ReactElement).props.size || iconSize}) : icon}
+            <i className={className} key={key}>
+                {isSemiIcon(icon) ? React.cloneElement((icon as React.ReactElement), { size: (icon as React.ReactElement).props.size || iconSize }) : icon}
             </i>
         );
     }
@@ -189,7 +193,6 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
         const selected = this.adapter.getSelected();
 
 
-
         let itemChildren = null;
         if (!isNullOrUndefined(children)) {
             itemChildren = children;
@@ -197,15 +200,15 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             let placeholderIcons = null;
             if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
                 const iconAmount = (icon && !indent) ? level : level - 1;
-                placeholderIcons = times(iconAmount, () => this.renderIcon(null, strings.ICON_POS_RIGHT, false));
+                placeholderIcons = times(iconAmount, (index) => this.renderIcon(null, strings.ICON_POS_RIGHT, false, index));
             }
             itemChildren = (
                 <>
                     {placeholderIcons}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
-                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT) : null}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
+                    {icon || indent || isInSubNav ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, 'key-position-left') : null}
                     {!isNullOrUndefined(text) ? <span className={`${cssClasses.PREFIX}-item-text`}>{text}</span> : ''}
-                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true)}
+                    {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIcon, strings.ICON_POS_RIGHT, true, 'key-toggle-pos-right')}
                 </>
             );
         }
@@ -246,7 +249,7 @@ export default class NavItem extends BaseComponent<NavItemProps, NavItemState> {
             );
         } else {
             // Items are divided into normal and sub-wrap
-            const popoverItemCls = cls(`${className || `${clsPrefix }-normal`}`, {
+            const popoverItemCls = cls(`${className || `${clsPrefix}-normal`}`, {
                 [clsPrefix]: true,
                 [`${clsPrefix}-sub`]: isSubNav,
                 [`${clsPrefix}-selected`]: selected && !isSubNav,

packages/semi-ui/navigation/SubNav.tsx

@@ -240,15 +240,15 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
         if (mode === strings.MODE_VERTICAL && !limitIndent && !isCollapsed) {
             /* Different icons' amount means different indents.*/
             const iconAmount = (icon && !indent) ? level : level - 1;
-            placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, undefined, index));
+            placeholderIcons = times(iconAmount, index => this.renderIcon(null, strings.ICON_POS_RIGHT, false, false, index));
         }
 
         const titleDiv = (
             <div
                 role="menuitem"
                 tabIndex={-1}
-                ref={this.setTitleRef as any} 
-                className={titleCls} 
+                ref={this.setTitleRef as any}
+                className={titleCls}
                 onClick={this.handleClick}
                 onKeyPress={this.handleKeyPress}
             >
@@ -256,7 +256,7 @@ export default class SubNav extends BaseComponent<SubNavProps, SubNavState> {
                     {placeholderIcons}
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_LEFT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-left')}
                     {icon || indent || (isInSubNav && mode !== strings.MODE_HORIZONTAL)
-                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, undefined, undefined, 'key-inSubNav-position-left')
+                        ? this.renderIcon(icon, strings.ICON_POS_LEFT, false, false, 'key-inSubNav-position-left')
                         : null}
                     <span className={`${prefixCls}-item-text`}>{text}</span>
                     {this.context.toggleIconPosition === strings.TOGGLE_ICON_RIGHT && this.renderIcon(toggleIconType, strings.ICON_POS_RIGHT, withTransition, true, 'key-toggle-position-right')}