浏览代码

fix: fix the trigger in dropdown do not response the enter press problem (#1103)

* fix: fix the trigger in dropdown do not response the enter press problem

* fix: fix the trigger in dropdown do not response the enter press problem
YannLynn 3 年之前
父节点
当前提交
6ad0f4eae2

+ 2 - 1
packages/semi-foundation/dropdown/foundation.ts

@@ -34,7 +34,8 @@ export default class DropdownFoundation extends BaseFoundation<DropdownAdapter>
             case ' ':
             case 'Enter':
                 event.target.click();
-                handlePrevent(event);
+                // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+                // handlePrevent(event);
                 break;
             case 'ArrowDown':
                 this.setFocusToFirstMenuItem(event.target);

+ 2 - 1
packages/semi-foundation/dropdown/menuFoundation.ts

@@ -54,7 +54,8 @@ export default class DropdownMenuFoundation extends BaseFoundation<Partial<Defau
             case ' ':
             case 'Enter':
                 event.target.click();
-                handlePrevent(event);
+                // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+                // handlePrevent(event);
                 break;
             case 'Escape':
                 this.handleEscape(menu);

+ 5 - 1
packages/semi-ui/dropdown/index.tsx

@@ -247,7 +247,11 @@ class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
                         }),
                         'aria-haspopup': true,
                         'aria-expanded': popVisible,
-                        onKeyDown: e => this.foundation.handleKeyDown(e)
+                        onKeyDown: e => {
+                            this.foundation.handleKeyDown(e);
+                            const childrenKeyDown = get(children, 'props.onKeyDown');
+                            childrenKeyDown && childrenKeyDown();
+                        }
                     }) :
                     children}
             </Tooltip>

+ 2 - 1
packages/semi-ui/tooltip/index.tsx

@@ -720,7 +720,8 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
                     ref.current = node;
                 }
             },
-            tabIndex:  (children as React.ReactElement).props.tabIndex || 0 // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            tabIndex: (children as React.ReactElement).props.tabIndex || 0, // a11y keyboard, in some condition select's tabindex need to -1 or 0 
+            'data-popupid': id
         });
 
         // If you do not add a layer of div, in order to bind the events and className in the tooltip, you need to cloneElement children, but this time it may overwrite the children's original ref reference