Menu is being hidden despite visibility being set to {true}

[EmersonChow]

Current behaviour

• Menu is being dismissed unexpectedly after the first instance despite visible = {true}
• As in my 5.13.1 video, the first input into my searchbox works but after a pause, subsequent inputs cause the behavior to be erratic

Expected behaviour

• Menu dropdown stays on when visible = {true}
• 5.12.5 video behavior is expected
• Code below has not been changed between the two versions

How to reproduce?

<Menu visible = {menuVisible} onDismiss={()=> setMenuVisible(false)} anchorPosition='bottom' style = {styles.menuStyle} contentStyle = {styles.menuContentStyle} children = {getAutocompleteSuggestionMenuItems((autoCompleteSuggestionsData != undefined && autoCompleteSuggestionsData.suggestions.length > 0) ? autoCompleteSuggestionsData.suggestions : [{placeId: '', text: 'No address suggestions found'}], setMenuVisible, getPlaceDetails, setAddressData)} anchor = { <TextInput label = {<Text>Street Address</Text>} value={addressData.streetAddress} onChangeText={async (newAddress:string) => { setAddressData(({ location, ...addressData }) => ({ ...addressData, streetAddress: newAddress })); if (addressData.streetAddress != ''){ const req: googleApiGetAddressRequest = { userText: newAddress, sessionToken: await getGoogleSessionToken() } getAddressAutofill(req) } if (menuVisible === true && newAddress === ''){ setMenuVisible(false); } else if (menuVisible === false){ setMenuVisible(true) } }} onSubmitEditing={()=>setMenuVisible(false)} autoComplete= 'address-line1' mode = 'outlined' multiline = {true} outlineColor= {outlineMissingInfo && !isValidStreetAddress(addressData.streetAddress)? 'red' : 'black'} ></TextInput> } ></Menu>

Preview

behavior on 5.12.5:

Screen.Recording.2025-02-14.at.3.24.07.PM.mov

behavior on latest 5.13.1

Screen.Recording.2025-02-14.at.3.30.05.PM.mov

What have you tried so far?

Downgrade react-native-paper from 5.13.1 to 5.12.5

Your Environment

software	version
ios	18.2
android	x
react-native	0.76.7
react-native-paper	5.12.5 (working as expected) vs 5.13.1 (not working)
node	>=18
npm or yarn	npm
expo sdk	x.x.x

[EmersonChow]

@satya164 @BogiKay Do either of you know if this is something to do with the newArch support?

[BogiKay]

@EmersonChow most likely it's related to the newArch support. Could you provide a reproducible example based on your code? It would speed things up

[EmersonChow]

@BogiKay
Here's some code I just threw together

import { useEffect, useState } from "react";
import { View } from "react-native"
import { Menu, TextInput } from "react-native-paper";

const ProfileTest: React.FC<{navigation: any}> = ({navigation}) => {
const [menuVisible, setMenuVisible] = useState(false);
const [textValue, setTextValue] = useState("")
const data = ["first", "second", "third"]

useEffect(()=>{
    console.log(menuVisible)
}, [menuVisible])

return (
    <View>
        <Menu
            visible = {menuVisible}
            onDismiss={()=> setMenuVisible(false)}
            anchorPosition='bottom'
            children = {getMenuItems(data)}
            anchor = {
                <TextInput
                    value={textValue}
                    onChangeText={(newText:string) => {
                        setTextValue(newText)
                        if (menuVisible === true && newText === ''){
                            setMenuVisible(false);
                          }
                        else if (menuVisible === false){
                        setMenuVisible(true)
                        }
                    }}
                    onSubmitEditing={()=>setMenuVisible(false)}
                    autoComplete= 'address-line1'
                    mode = 'outlined'
                ></TextInput>
            }
        ></Menu>
    </View>
)

}

function getMenuItems(data: string[]): React.JSX.Element{
return (

{
data.map((thing)=>(
<Menu.Item
key = {thing}
title = {thing}
></Menu.Item>
))
}

)
}

export default ProfileTest

the useEffect logs show that visibility isn't changing:
false
true

Screen.Recording.2025-02-19.at.6.46.20.PM.mov

[BogiKay]

Thanks! I'll investigate the issue

[gpurbia]

@BogiKay any update on this issue ?

[BogiKay]

@gpurbia Today I finally I've had some time to investigate this issue. I think I found an issue. I'm planning to raise a PR tomorrow, but it will need to be tested thoroughly

[gpurbia]

@BogiKay Tested with the latest change, and it is working as expected now. Thanks for fixing this issue.

[gpurbia]

@BogiKay Can you please merge the PR ?

[BogiKay]

@gpurbia thank you for testing the changes. I'll test a few things tomorrow and if nothing comes up I'll merge it

[bastianspirek]

Hi @BogiKay, do you think you could merge this? It makes the Menu unusable and since the new architecture is default now I think it will affect many people. Thanks a lot!