Bug: Multiline Mention Input Scrolls to End on Selecting Suggestion at Top

[testdropdown]

In a multiline MentionInput with maxHeight set (e.g. maxHeight: moderateScale(120)), when I scroll up and place the cursor at the start of the text, triggering a mention (@) and selecting a suggestion causes the input to scroll to the end.
✅ Expected:
The input should stay at the caret position (top), not scroll to the bottom.
🔁 Steps to Reproduce:

1. Type a long message until scrolling is enabled.
2. Move the cursor to the top/start.
3. Type @ and select a mention.
4. Input scrolls to the bottom unexpectedly.

Please see the attached video also @juandjara @dabakovich @hyze2d . Thanks

Video.Clip.2025-08-04.20_40_36.mp4

Reproduce Example Code
`
import React, { useState } from 'react';
import { View, Text, FlatList, TouchableOpacity, StyleSheet, Pressable, Keyboard } from 'react-native';
import {
MentionInput,
replaceMentionValues,
} from 'react-native-controlled-mentions';

const users = [
{ id: '1', name: 'JohnDoe' },
{ id: '2', name: 'JaneSmith' },
{ id: '3', name: 'MikeTyson' },
];
const Dummy = () => {
const [value, setValue] = useState('');

const renderSuggestions = ({ keyword, onSuggestionPress }) => {
    console.log("keyword", keyword)
    if (!keyword) return null;

    const filteredUsers = users.filter(user =>
        user.name.toLowerCase().includes(keyword.toLowerCase())
    );
    console.log("filteredUsers", filteredUsers)
    return (
        <FlatList
            keyboardShouldPersistTaps="always"
            data={filteredUsers}
            keyExtractor={item => item.id}
            renderItem={({ item }) => (
                <TouchableOpacity
                    onPress={() => onSuggestionPress(item)}
                    style={{ padding: 10, backgroundColor: 'blue', position: 'relative', zIndex: 100000 }}
                >
                    <Text>{item.name}</Text>
                </TouchableOpacity>
            )}
        />
    );
};
return (
    <View style={{ flex: 1, padding: 20 }}>
        <Pressable style={{ backgroundColor: 'pink', width: 300, height: 300, position: 'relative', zIndex: -1 }} onPress={() => {
            Keyboard.dismiss()
        }}>

        </Pressable>
        <MentionInput
            value={value}
            onChange={setValue}
            multiline={true}
            partTypes={[
                {
                    trigger: '@',
                    renderSuggestions: renderSuggestions,
                    textStyle: { fontWeight: 'bold', color: 'blue' },
                },
            ]}
            scrollEnabled
            style={{
                maxHeight: 100,
                borderColor: '#ccc',
                borderWidth: 1,
                padding: 10,
            }}
            placeholder="Type something and mention someone with @..."
        />
    </View>
);

}

export default Dummy

const styles = StyleSheet.create({})
`

[juandjara]

I think I found this error but end up solving it. It was not trivial. It involved stopping things from re-rendering, keeping data structures consistent and such.

You can check my implementation here: https://github.com/juandjara/wafrn-rn/blob/main/components/editor/EditorInput.tsx

[testdropdown]

I think I found this error but end up solving it. It was not trivial. It involved stopping things from re-rendering, keeping data structures consistent and such.

You can check my implementation here: https://github.com/juandjara/wafrn-rn/blob/main/components/editor/EditorInput.tsx

cc: @dabakovich @hyze2d

@juandjara first of all, thank you so much for the prompt response. I’ve gone through your code, but I’m still having trouble understanding exactly what I need to change in mine. Could you please suggest the specific changes I should make, if possible?

If it's a state-related issue, I created a dummy component and tried a minimalistic approach just to isolate the root cause of the scrolling problem but same issue. I’d really appreciate your valuable insights. In my actual project I am using "react-native-controlled-mentions": "^2.2.5" but for testing purpose I have also used "react-native-controlled-mentions": "^3.1.0"