stream_edit: Disable add button when input field is empty.

Fixes #19507.

web/src/add_subscribers_pill.js

@@ -59,6 +59,24 @@ export function create({$pill_container, get_potential_subscribers}) {
 
     set_up_pill_typeahead({pill_widget, $pill_container, get_users});
 
+    const $pill_widget_input = $pill_container.find(".input");
+    const $pill_widget_button = $pill_container.parent().find(".add-subscriber-button");
+    // Disable the add button first time the pill container is created.
+    $pill_widget_button.prop("disabled", true);
+
+    // If all the pills are removed, disable the add button.
+    pill_widget.onPillRemove(() =>
+        $pill_widget_button.prop("disabled", pill_widget.items().length === 0),
+    );
+    // Disable the add button when there is no pending text that can be converted
+    // into a pill and the number of existing pills is zero.
+    $pill_widget_input.on("input", () =>
+        $pill_widget_button.prop(
+            "disabled",
+            !pill_widget.is_pending() && pill_widget.items().length === 0,
+        ),
+    );
+
     return pill_widget;
 }
 

web/src/stream_create_subscribers.js

@@ -57,8 +57,12 @@ export function create_handlers($container) {
         remove_user_ids([user_id]);
     });
 
+    const button_selector = ".add_subscribers_container button.add-subscriber-button";
     function add_users({pill_user_ids}) {
         add_user_ids(pill_user_ids);
+        // eslint-disable-next-line unicorn/no-array-callback-reference
+        const $pill_widget_button = $container.find(button_selector);
+        $pill_widget_button.prop("disabled", true);
         pill_widget.clear();
     }
 
@@ -66,7 +70,7 @@ export function create_handlers($container) {
         get_pill_widget: () => pill_widget,
         $parent_container: $container,
         pill_selector: ".add_subscribers_container .input",
-        button_selector: ".add_subscribers_container button.add-subscriber-button",
+        button_selector,
         action: add_users,
     });
 }