diff --git a/src/AsyncUserSelect/index.css b/src/AsyncUserSelect/index.css index 60f14e93..fef200de 100644 --- a/src/AsyncUserSelect/index.css +++ b/src/AsyncUserSelect/index.css @@ -2,9 +2,9 @@ flex-wrap: wrap; height: auto !important; min-height: 38px; - max-width: calc(100% - 10px); padding: .375rem 40px .375rem 1rem; position: relative; + border-radius: 4px; } .dtable-ui-selected-users-container.focus { @@ -12,7 +12,7 @@ } .dtable-ui-selected-users-container .dtable-ui-user-select-placeholder { - color: var(--bs-icon-color); + color: var(--bs-bg-placeholder-color) } .select-dropdown-indicator { @@ -31,8 +31,6 @@ .dtable-ui-user-select-popover { z-index: 1060; - width: 385px !important; - max-width: 385px; margin-top: -4px; background-color: var(--bs-popover-bg); box-shadow: var(--bs-border-secondary-shadow); @@ -67,8 +65,7 @@ background: none !important; } -.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover, -.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container-highlight { +.dtable-ui-user-select-container .dtable-ui-user-list-container .dtable-ui-user-item-container:hover { background-color: var(--bs-btn-background-hover); cursor: pointer; } diff --git a/src/AsyncUserSelect/index.js b/src/AsyncUserSelect/index.js index ecd92bce..0e7a3bfe 100644 --- a/src/AsyncUserSelect/index.js +++ b/src/AsyncUserSelect/index.js @@ -34,13 +34,11 @@ const AsyncUserSelect = ({ className, emptyPlaceholder = '', searchPlaceholder = const trimmedSearchValue = searchValue?.trim() || ''; if (!trimmedSearchValue) { setSearchedUsers([]); - setHighlightIndex(-1); return; } loadOptions && loadOptions(searchValue, (options = []) => { // [{ email, name, avatar_url }, ...] setSearchedUsers(options); - setHighlightIndex(options.length > 0 ? 0 : -1); }); }, [loadOptions]); diff --git a/src/DTableCustomizeSearchInput/index.css b/src/DTableCustomizeSearchInput/index.css index c1f094fd..ce0e79c1 100644 --- a/src/DTableCustomizeSearchInput/index.css +++ b/src/DTableCustomizeSearchInput/index.css @@ -13,6 +13,10 @@ height: 32px; } +.select-search-control::placeholder { + color: var(--bs-bg-placeholder-color); +} + .select-search-control { height: 100%; border: none; diff --git a/src/DTableCustomizeSelect/index.css b/src/DTableCustomizeSelect/index.css index 9a5f50ed..a45ea272 100644 --- a/src/DTableCustomizeSelect/index.css +++ b/src/DTableCustomizeSelect/index.css @@ -101,7 +101,7 @@ line-height: 20px; margin-right: 8px; width: calc(100% - 20px); - display: flex; + display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; diff --git a/src/DTableCustomizeSelect/index.js b/src/DTableCustomizeSelect/index.js index 6225d1cb..da9cacd3 100644 --- a/src/DTableCustomizeSelect/index.js +++ b/src/DTableCustomizeSelect/index.js @@ -109,7 +109,7 @@ class DTableCustomizeSelect extends Component { {value.label} : {placeholder} } - {!isLocked && } + {this.state.isShowSelectOptions && !isInModal && (