chore(ui): add options range and auto focus for new poll options (#2342)

Co-authored-by: xsahil03x <[email protected]>

Author: xsahil03x

packages/stream_chat_flutter/lib/src/misc/separated_reorderable_list_view.dart

@@ -13,6 +13,8 @@ class SeparatedReorderableListView extends ReorderableListView {
     required IndexedWidgetBuilder separatorBuilder,
     required int itemCount,
     required ReorderCallback onReorder,
+    super.onReorderStart,
+    super.onReorderEnd,
     super.itemExtent,
     super.prototypeItem,
     super.proxyDecorator,

packages/stream_chat_flutter/lib/src/poll/creator/poll_option_reorderable_list_view.dart

@@ -56,6 +56,7 @@ class PollOptionListItem extends StatelessWidget {
     super.key,
     required this.option,
     this.hintText,
+    this.focusNode,
     this.onChanged,
   });
 
@@ -65,6 +66,9 @@ class PollOptionListItem extends StatelessWidget {
   /// Hint to be displayed in the poll option list item.
   final String? hintText;
 
+  /// The focus node for the text field.
+  final FocusNode? focusNode;
+
   /// Callback called when the poll option item is changed.
   final ValueSetter<PollOptionItem>? onChanged;
 
@@ -90,6 +94,7 @@ class PollOptionListItem extends StatelessWidget {
               borderRadius: borderRadius,
               errorText: option.error,
               errorStyle: theme.optionsTextFieldErrorStyle,
+              focusNode: focusNode,
               onChanged: (text) => onChanged?.call(option.copyWith(text: text)),
             ),
           ),
@@ -115,6 +120,7 @@ class PollOptionReorderableListView extends StatefulWidget {
     this.itemHintText,
     this.allowDuplicate = false,
     this.initialOptions = const [],
+    this.optionsRange,
     this.onOptionsChanged,
   });
 
@@ -132,6 +138,12 @@ class PollOptionReorderableListView extends StatefulWidget {
   /// The initial list of poll options.
   final List<PollOptionItem> initialOptions;
 
+  /// The range of allowed options (min and max).
+  ///
+  /// If `null`, there are no limits. If only min or max is specified,
+  /// the other bound is unlimited.
+  final Range<int>? optionsRange;
+
   /// Callback called when the items are updated or reordered.
   final ValueSetter<List<PollOptionItem>>? onOptionsChanged;
 
@@ -142,9 +154,59 @@ class PollOptionReorderableListView extends StatefulWidget {
 
 class _PollOptionReorderableListViewState
     extends State<PollOptionReorderableListView> {
-  late var _options = <String, PollOptionItem>{
-    for (final option in widget.initialOptions) option.id: option,
-  };
+  late Map<String, FocusNode> _focusNodes;
+  late Map<String, PollOptionItem> _options;
+
+  @override
+  void initState() {
+    super.initState();
+    _initializeOptions();
+  }
+
+  @override
+  void dispose() {
+    _disposeOptions();
+    super.dispose();
+  }
+
+  void _initializeOptions() {
+    _focusNodes = <String, FocusNode>{};
+    _options = <String, PollOptionItem>{};
+
+    for (final option in widget.initialOptions) {
+      _options[option.id] = option;
+      _focusNodes[option.id] = FocusNode();
+    }
+
+    // Ensure we have at least the minimum number of options
+    _ensureMinimumOptions(notifyParent: true);
+  }
+
+  void _ensureMinimumOptions({bool notifyParent = false}) {
+    // Ensure we have at least the minimum number of options
+    final minOptions = widget.optionsRange?.min ?? 1;
+
+    var optionsAdded = false;
+    while (_options.length < minOptions) {
+      final option = PollOptionItem();
+      _options[option.id] = option;
+      _focusNodes[option.id] = FocusNode();
+      optionsAdded = true;
+    }
+
+    // Notify parent if we added options and it's requested
+    if (optionsAdded && notifyParent) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        widget.onOptionsChanged?.call([..._options.values]);
+      });
+    }
+  }
+
+  void _disposeOptions() {
+    _focusNodes.values.forEach((it) => it.dispose());
+    _focusNodes.clear();
+    _options.clear();
+  }
 
   @override
   void didUpdateWidget(covariant PollOptionReorderableListView oldWidget) {
@@ -159,9 +221,8 @@ class _PollOptionReorderableListViewState
     );
 
     if (optionItemEquality.equals(currOptions, newOptions) case false) {
-      _options = <String, PollOptionItem>{
-        for (final option in widget.initialOptions) option.id: option,
-      };
+      _disposeOptions();
+      _initializeOptions();
     }
   }
 
@@ -216,8 +277,10 @@ class _PollOptionReorderableListViewState
 
         return value.copyWith(error: _validateOption(value));
       });
+    });
 
-      // Notify the parent widget about the change
+    // Notify the parent widget about the change
+    WidgetsBinding.instance.addPostFrameCallback((_) {
       widget.onOptionsChanged?.call([..._options.values]);
     });
   }
@@ -234,23 +297,50 @@ class _PollOptionReorderableListViewState
       _options = <String, PollOptionItem>{
         for (final option in options) option.id: option,
       };
+    });
 
-      // Notify the parent widget about the change
+    // Notify the parent widget about the change
+    WidgetsBinding.instance.addPostFrameCallback((_) {
       widget.onOptionsChanged?.call([..._options.values]);
     });
   }
 
   void _onAddOptionPressed() {
+    // Check if we've reached the maximum number of options allowed
+    if (widget.optionsRange?.max case final maxOptions?) {
+      // Don't add more options if we've reached the limit
+      if (_options.length >= maxOptions) return;
+    }
+
+    // Create a new option item
+    final option = PollOptionItem();
+
     setState(() {
-      // Create a new option and add it to the map.
-      final option = PollOptionItem();
       _options[option.id] = option;
+      _focusNodes[option.id] = FocusNode();
+    });
 
-      // Notify the parent widget about the change
+    // Notify the parent widget about the change and request focus on the
+    // newly added option text field.
+    WidgetsBinding.instance.addPostFrameCallback((_) {
       widget.onOptionsChanged?.call([..._options.values]);
+      _focusNodes[option.id]?.requestFocus();
     });
   }
 
+  bool get _canAddMoreOptions {
+    // Don't allow adding if there's already an empty option
+    final hasEmptyOption = _options.values.any((it) => it.text.isEmpty);
+    if (hasEmptyOption) return false;
+
+    // Check max options limit
+    if (widget.optionsRange?.max case final maxOptions?) {
+      return _options.length < maxOptions;
+    }
+
+    return true;
+  }
+
   @override
   Widget build(BuildContext context) {
     final theme = StreamPollCreatorTheme.of(context);
@@ -271,13 +361,15 @@ class _PollOptionReorderableListViewState
             physics: const NeverScrollableScrollPhysics(),
             proxyDecorator: _proxyDecorator,
             separatorBuilder: (_, __) => const SizedBox(height: 8),
+            onReorderStart: (_) => FocusScope.of(context).unfocus(),
             onReorder: _onOptionReorder,
             itemBuilder: (context, index) {
               final option = _options.values.elementAt(index);
               return PollOptionListItem(
                 key: Key(option.id),
                 option: option,
                 hintText: widget.itemHintText,
+                focusNode: _focusNodes[option.id],
                 onChanged: _onOptionChanged,
               );
             },
@@ -287,7 +379,7 @@ class _PollOptionReorderableListViewState
         SizedBox(
           width: double.infinity,
           child: FilledButton.tonal(
-            onPressed: _onAddOptionPressed,
+            onPressed: _canAddMoreOptions ? _onAddOptionPressed : null,
             style: TextButton.styleFrom(
               alignment: Alignment.centerLeft,
               textStyle: theme.optionsTextFieldStyle,

packages/stream_chat_flutter/lib/src/poll/creator/stream_poll_creator_widget.dart

@@ -65,6 +65,7 @@ class StreamPollCreatorWidget extends StatelessWidget {
                 title: translations.optionLabel(isPlural: true),
                 itemHintText: translations.optionLabel(),
                 allowDuplicate: config.allowDuplicateOptions,
+                optionsRange: config.optionsRange,
                 initialOptions: [
                   for (final option in poll.options)
                     PollOptionItem(id: option.id, text: option.text),

packages/stream_chat_flutter/lib/src/poll/stream_poll_text_field.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:stream_chat_flutter/src/misc/empty_widget.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
@@ -141,6 +142,7 @@ class _StreamPollTextFieldState extends State<StreamPollTextField> {
           style: widget.style ?? theme.textTheme.headline,
           keyboardType: widget.keyboardType,
           autofocus: widget.autoFocus,
+          inputFormatters: [FilteringTextInputFormatter.deny(RegExp(r'^\s'))],
           decoration: InputDecoration(
             filled: true,
             isCollapsed: true,