fix(ui): overflow of mentions overlay & input focus node

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,9 @@
+## Upcoming
+
+🐞 Fixed
+
+- Mentions overlay now doesn't overflow when not enough height available
+
 ## 3.5.0
 
 🐞 Fixed

packages/stream_chat_flutter/lib/src/message_input.dart

@@ -344,6 +344,7 @@ class MessageInputState extends State<MessageInput> {
 
   final _imagePicker = ImagePicker();
   late final _focusNode = widget.focusNode ?? FocusNode();
+  late final _isInternalFocusNode = widget.focusNode == null;
   bool _inputEnabled = true;
   bool _commandEnabled = false;
   bool _showCommandsOverlay = false;
@@ -1191,30 +1192,36 @@ class MessageInputState extends State<MessageInput> {
       };
     }
 
-    return UserMentionsOverlay(
+    return LayoutBuilder(
-      query: query,
+      builder: (context, snapshot) => UserMentionsOverlay(
-      mentionAllAppUsers: widget.mentionAllAppUsers,
+        query: query,
-      client: StreamChat.of(context).client,
+        mentionAllAppUsers: widget.mentionAllAppUsers,
-      channel: channel,
+        client: StreamChat.of(context).client,
-      size: Size(renderObject.size.width - 16, 400),
+        channel: channel,
-      mentionsTileBuilder: tileBuilder,
+        size: Size(
-      onMentionUserTap: (user) {
+          renderObject.size.width - 16,
-        _mentionedUsers.add(user);
+          min(400, (snapshot.maxHeight - renderObject.size.height - 16).abs()),
-        splits[splits.length - 1] = user.name;
+        ),
-        final rejoin = splits.join('@');
+        mentionsTileBuilder: tileBuilder,
+        onMentionUserTap: (user) {
+          _mentionedUsers.add(user);
+          splits[splits.length - 1] = user.name;
+          final rejoin = splits.join('@');
 
-        textEditingController.value = TextEditingValue(
+          textEditingController.value = TextEditingValue(
-          text: rejoin +
+            text: rejoin +
-              textEditingController.text.substring(
+                textEditingController.text.substring(
-                textEditingController.selection.start,
+                  textEditingController.selection.start,
-              ),
+                ),
-          selection: TextSelection.collapsed(
+            selection: TextSelection.collapsed(
-            offset: rejoin.length,
+              offset: rejoin.length,
-          ),
+            ),
-        );
+          );
-        _onChangedDebounced.cancel();
+          _onChangedDebounced.cancel();
-        setState(() => _showMentionsOverlay = false);
+
-      },
+          setState(() => _showMentionsOverlay = false);
+        },
+      ),
     );
   }
 
@@ -1925,6 +1932,7 @@ class MessageInputState extends State<MessageInput> {
   void dispose() {
     textEditingController.dispose();
     _focusNode.removeListener(_focusNodeListener);
+    if (_isInternalFocusNode) _focusNode.dispose();
     _stopSlowMode();
     _onChangedDebounced.cancel();
     super.dispose();