Merge branch 'main' of github.com:DouyinFE/semi-design

packages/semi-foundation/dropdown/foundation.ts

@@ -13,7 +13,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
         this._adapter.notifyVisibleChange(visible);
 
         const { trigger } = this.getProps();
-        if (visible && trigger === "click"){
+        if (visible && trigger === "click") {
             const popupId = this._adapter.getPopupId();
             this.setFocusToFirstMenuItem(popupId);
         }
@@ -37,6 +37,7 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
 
     handleKeyDown(event: any): void {
         const id = event.target?.attributes['data-popupid']?.value;
+        const { visible } = this._adapter.getStates();
         switch (event.key) {
             case ' ':
             case 'Enter':
@@ -46,11 +47,11 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
                 break;
             case 'ArrowDown':
                 this.setFocusToFirstMenuItem(id);
-                handlePrevent(event);
+                visible && handlePrevent(event);
                 break;
             case 'ArrowUp':
                 this.setFocusToLastMenuItem(id);
-                handlePrevent(event);
+                visible && handlePrevent(event);
                 break;
             default:
                 break;

packages/semi-ui/dropdown/_story/dropdown.stories.jsx

@@ -8,6 +8,7 @@ import MultiDropdown from './MultiDropdown';
 import DisabledItem from './DisabledItem';
 import InHoverElements from './InHoverElements';
 import WrapAvatar from './WrapAvatar';
+import TextArea from '../../input/textarea'
 import { IconBox, IconChevronDown, IconSimilarity, IconSetting, IconForward, IconColorPalette, IconRefresh, IconSearch, IconBranch } from '@douyinfe/semi-icons';
 
 export { DropdownItem } from '../_story/C2D';
@@ -376,4 +377,22 @@ export function ShowTick() {
           </Dropdown>
       </div>
   );
+}
+
+export function Fix1606() {
+  return (
+      <Dropdown
+        trigger="customer"
+        visible={false}
+        render={
+              <Dropdown.Menu>
+                  <Dropdown.Item>Menu Item 1</Dropdown.Item>
+                  <Dropdown.Item>Menu Item 2</Dropdown.Item>
+                  <Dropdown.Item>Menu Item 3</Dropdown.Item>
+              </Dropdown.Menu>
+        }
+        >
+          <TextArea style={{ width: 200 }} defaultValue='请尝试在此处使用上下箭头切换当前行'/>
+      </Dropdown>
+  );
 }