Merge pull request #1525 from XiaoMi/feature/#1522

feat: #1522
XiaoMi · Jan 18, 2021 · 2b7ad1f · 2b7ad1f
2 parents f55a13e + 8f74d89
commit 2b7ad1f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/components/select/Select.js b/components/select/Select.js
@@ -630,7 +630,8 @@ const InternalSelect = (props) => {
           searchPlaceholder={searchPlaceholder}
           theme={theme}
           onFocus={onFocus}
-          isOnSearch={dataSource}
+          isByRemoteSearch={dataSource}
+          isByCustomSearch={onSearch}
           onSearch={debouncedFilterItems}
           searchable={searchable}
           showCheckAll={showCheckAll}

diff --git a/components/select/SelectDropdown.js b/components/select/SelectDropdown.js
@@ -21,7 +21,8 @@ const SelectDropdown = ({
   dropdownItems,
   localeMap,
   onSearch,
-  isOnSearch,
+  isByRemoteSearch,
+  isByCustomSearch,
   onClickOption,
   checkAll,
   selectInputWidth,
@@ -104,7 +105,7 @@ const SelectDropdown = ({
   useEffect(() => {
     const _filterItems = dropdownItems
     setFilterItems(_filterItems)
-  }, [mode, isOnSearch, dropdownItems, show])
+  }, [mode, isByRemoteSearch, dropdownItems, show])
 
   let matched = 0
   const style = optionWidth && {
@@ -150,6 +151,7 @@ const SelectDropdown = ({
     (e, item, index) => {
       e.stopPropagation()
       e.preventDefault()
+      setFocusedIndex(index)
       if (item[transKeys(fieldNames, 'disabled')]) {
         return
       }
@@ -208,15 +210,15 @@ const SelectDropdown = ({
             disabled={item[transKeys(fieldNames, 'disabled')]}
           >
             <div className="hi-select__dropdown--item__name" style={style}>
-              {isOnSearch
+              {isByRemoteSearch
                 ? item[transKeys(fieldNames, 'title')]
                 : hightlightKeyword(item[transKeys(fieldNames, 'title')], item[transKeys(fieldNames, 'id')])}
             </div>
           </Checkbox>
         )}
         {mode === 'single' && (
           <div className="hi-select__dropdown--item__name" style={style}>
-            {isOnSearch
+            {isByRemoteSearch
               ? item[transKeys(fieldNames, 'title')]
               : hightlightKeyword(item[transKeys(fieldNames, 'title')], item[transKeys(fieldNames, 'id')])}
           </div>
@@ -251,7 +253,7 @@ const SelectDropdown = ({
           'is-active': isSelected,
           'is-disabled': isDisabled,
           'hi-select__dropdown--item--child': isChildItem,
-          'is-focus': filterItemsIndex === focusedIndex,
+          'is-focus': targetByKeyDown.current && filterItemsIndex === focusedIndex,
           'hi-select__dropdown--item-default': !item[transKeys(fieldNames, 'children')] && !dropdownRender
         })}
         onClick={(e) => onClickOptionIntal(e, item, _filterItemsIndex)}
@@ -298,7 +300,7 @@ const SelectDropdown = ({
   }
   return (
     <div className="hi-select__dropdown" style={style}>
-      {searchable && (
+      {(searchable || isByCustomSearch) && (
         <div className="hi-select__dropdown__searchbar">
           <div className="hi-select__dropdown__searchbar--content">
             <span style={{ cursor: 'pointer' }}>

diff --git a/components/select/style/select-dropdown.scss b/components/select/style/select-dropdown.scss
@@ -100,6 +100,10 @@
     }
 
     &.is-focus {
+      background-color: use-color('primary-10');
+    }
+
+    &:hover {
       background-color: use-color('primary-20');
     }