callstack / callstack/react-native-paper

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

Abierto
#4,606 2 comentarios 0 reacciones 0 asignados Ver en GitHub
bug Menu
Lenguaje dominante
TypeScript
Estrellas
14.5k
Forks
2.2k
Merge medio
5 d 23 h
PR fusionados (30 d)
12

Descripción

### 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 version`5.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 (
{
console.log('dismiss', { isSearchFocused, showCountryPicker })

// Only dismiss if search isn't focused
if (!isSearchFocused) {
setShowCountryPicker(false)
}
}}
anchor={
{
console.log('touchStart')
setShowCountryPicker(true)
}
: undefined
}
right={
{
console.log('onPress')
setShowCountryPicker(!showCountryPicker)
}}
/>
}
dense
mode="outlined"
/>
}>
{
console.log('onFocus')
setIsSearchFocused(true)
}}
/>


)
```

### 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

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.