Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
EmersonChow opened this issue Feb 14, 2025 · 4 comments
Open

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

EmersonChow opened this issue Feb 14, 2025 · 4 comments

Comments

@EmersonChow
Copy link

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
Copy link
Author

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

@BogiKay
Copy link
Contributor

BogiKay commented Feb 18, 2025

@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
Copy link
Author

EmersonChow commented Feb 20, 2025

@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
Copy link
Contributor

BogiKay commented Feb 20, 2025

Thanks! I'll investigate the issue

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants