feat(select): update scrollTop after key down/up (#607)

packages/semi-foundation/select/foundation.ts

@@ -44,7 +44,7 @@ export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyMouseLeave(event: any): void;
     notifyMouseEnter(event: any): void;
     updateHovering(isHover: boolean): void;
-    updateScrollTop(): void;
+    updateScrollTop(index?: number): void;
 }
 
 type LabelValue = string | number;
@@ -704,7 +704,7 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         }
         // console.log('new:' + index);
         this._adapter.updateFocusIndex(index);
-        // TODO requires scrollIntoView
+        this._adapter.updateScrollTop(index);
     }
 
     _handleArrowKeyDown(offset: number) {
@@ -954,4 +954,5 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     updateScrollTop() {
         this._adapter.updateScrollTop();
     }
+    
 }

packages/semi-ui/select/index.tsx

@@ -530,9 +530,13 @@ class Select extends BaseComponent<SelectProps, SelectState> {
 
                 }
             },
-            updateScrollTop: () => {
+            updateScrollTop: (index?: number) => {
                 // eslint-disable-next-line max-len
-                let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} .${prefixcls}-option-selected`) as HTMLDivElement;
+                let optionClassName = `.${prefixcls}-option-selected`;
+                if (index !== undefined) {
+                    optionClassName = `.${prefixcls}-option:nth-child(${index})`;
+                }
+                let destNode = document.querySelector(`#${prefixcls}-${this.selectOptionListID} ${optionClassName}`) as HTMLDivElement;
                 if (Array.isArray(destNode)) {
                     // eslint-disable-next-line prefer-destructuring
                     destNode = destNode[0];