dropdown_widget: Show "No search results" instead of an empty list.

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) {

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;
+    }
 }

web/templates/dropdown_list.hbs

@@ -1,6 +1,6 @@
 {{#with item}}
     <li class="list-item" role="presentation" data-unique-id="{{unique_id}}" data-name="{{name}}" tabindex="0">
-        <a role="menuitem">
+        <a class="dropdown-list-item-common-styles" role="menuitem">
             {{#if stream}}
                 {{> inline_decorated_stream_name stream=stream show_colored_icon=true}}
             {{else if is_direct_message}}

web/templates/dropdown_list_container.hbs

@@ -5,4 +5,7 @@
     <div class="dropdown-list-wrapper" data-simplebar>
         <ul class="dropdown-list"></ul>
     </div>
+    <div class="no-dropdown-items dropdown-list-item-common-styles">
+        {{t 'No search results'}}
+    </div>
 </div>