diff --git a/web/src/dropdown_widget.js b/web/src/dropdown_widget.js index 55ee6c4cc7..4f5d567e9f 100644 --- a/web/src/dropdown_widget.js +++ b/web/src/dropdown_widget.js @@ -58,6 +58,16 @@ export function setup(tippy_props, get_options, item_click_callback, dropdown_pr $simplebar_container: $popper.find(".dropdown-list-wrapper"), }); + $search_input.on("input.list_widget_filter", () => { + const list_items = list_widget.get_current_list(); + const $no_search_results = $popper.find(".no-dropdown-items"); + if (list_items.length === 0) { + $no_search_results.show(); + } else { + $no_search_results.hide(); + } + }); + // Keyboard handler $popper.on("keydown", (e) => { function trigger_element_focus($element) { diff --git a/web/styles/zulip.css b/web/styles/zulip.css index 103ac848b2..bb40f831aa 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -3077,6 +3077,13 @@ select.invite-as { } } + .dropdown-list-item-common-styles { + padding: 3px 10px 3px 8px; + font-weight: 400; + line-height: 20px; + white-space: normal; + } + .dropdown-list-wrapper { /* Sync with `max-height` in dropdown_widget. */ max-height: 210px; @@ -3093,12 +3100,7 @@ select.invite-as { .list-item a { display: block; - padding: 3px 10px 3px 8px; - clear: both; - font-weight: 400; - line-height: 20px; color: hsl(0deg 0% 20%); - white-space: normal; .stream-privacy-type-icon { font-size: 13px; @@ -3119,4 +3121,9 @@ select.invite-as { } } } + + .no-dropdown-items { + color: hsl(0deg 0% 60%); + display: none; + } } diff --git a/web/templates/dropdown_list.hbs b/web/templates/dropdown_list.hbs index b2d4ebc4e0..fa5d28ee0f 100644 --- a/web/templates/dropdown_list.hbs +++ b/web/templates/dropdown_list.hbs @@ -1,6 +1,6 @@ {{#with item}}