diff --git a/components/select/Select.js b/components/select/Select.js index 38c59a34a..f19d0000f 100644 --- 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 index cd9fa8a27..d9977491f 100644 --- 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,7 +210,7 @@ const SelectDropdown = ({ disabled={item[transKeys(fieldNames, 'disabled')]} >
- {isOnSearch + {isByRemoteSearch ? item[transKeys(fieldNames, 'title')] : hightlightKeyword(item[transKeys(fieldNames, 'title')], item[transKeys(fieldNames, 'id')])}
@@ -216,7 +218,7 @@ const SelectDropdown = ({ )} {mode === 'single' && (
- {isOnSearch + {isByRemoteSearch ? item[transKeys(fieldNames, 'title')] : hightlightKeyword(item[transKeys(fieldNames, 'title')], item[transKeys(fieldNames, 'id')])}
@@ -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 (
- {searchable && ( + {(searchable || isByCustomSearch) && (
diff --git a/components/select/style/select-dropdown.scss b/components/select/style/select-dropdown.scss index 4bf6147e6..e8d959c5c 100644 --- 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'); }