Focus a Searchbar in a Menu component hides the modal in expo-web

[abelbordonado]

Current behaviour

I have a search bar into a menu tag, clicking on it makes the full menu modal disappear.
This is an issue happening on 5.13.1.

On the version5.12.5 we had a similar issue where the dismiss of the modal was fired after clicking on the SearchBar, but we had added a flag to check if the search bar was focused or not and that made the job.

Expected behavior

Clicking on the search bar shall not fire onBlur and not hide the modal at all

How to reproduce?

This is the relevant part of the code, not the full file

  const [showCountryPicker, setShowCountryPicker] = useState(false)
  const [isSearchFocused, setIsSearchFocused] = useState(false)
  console.log('showCountryPicker', showCountryPicker)
  return (
    <Menu
              visible={showCountryPicker}
              anchorPosition={'bottom'}
              style={{
                flex: 1,
                // width: windowWidth - 2 * theme.spacing(4),
              }}
              onDismiss={() => {
                console.log('dismiss', { isSearchFocused, showCountryPicker })

                // Only dismiss if search isn't focused
                if (!isSearchFocused) {
                  setShowCountryPicker(false)
                }
              }}
              anchor={
                <TextInput
                  disabled={disabled}
                  style={{ top: -2 }}
                  value={value}
                  autoComplete="tel-country-code"
                  editable={false}
                  onTouchStart={
                    !disabled
                      ? () => {
                          console.log('touchStart')
                          setShowCountryPicker(true)
                        }
                      : undefined
                  }
                  right={
                    <TextInput.Icon
                      icon={showCountryPicker ? 'menu-up' : 'menu-down'}
                      disabled={disabled}
                      onPress={() => {
                        console.log('onPress')
                        setShowCountryPicker(!showCountryPicker)
                      }}
                    />
                  }
                  dense
                  mode="outlined"
                />
              }>
              <Searchbar
                placeholder={t('country-code-placeholder')}
                onChangeText={setSearchQuery}
                value={searchQuery}
                  console.log('onBlur')
                  setIsSearchFocused(false)
                }}
                onFocus={() => {
                  console.log('onFocus')
                  setIsSearchFocused(true)
                }}
              />
            


            </Menu>
)

Preview

What have you tried so far?

Trying to prevent the events on blur.

Your Environment

I can reproduce this in my local machine and in the staging server

software	version
react-native-web	~0.19.13
react-native	0.73.6
react-native-paper	5.13.1
node	v21.6.2
pnpm	8.11.0
expo sdk	~50.0.21

[mbpictures]

I think this is related to a re-render of the component. I have the same issue, that the menu closes when the state of the component (where the Menu is inside of) changes, and therefore the Menu renders again. My workaround was to move the children of the Menu inside of a child component. In your example you would move the Searchbar and the isSearchFocused state inside of the sub-component, so only the sub-component re-renders when changing the state.

I hope this issue will be fixed soon, so this workaround is not required, as it affects a lot of Menu's in our project.

[mbpictures]

I investigated a little further and found a lot of refactoring going on in the new arch PR. I also found a patch which fixes the issue:

react-native-paper+5.13.1.patch