callstack / callstack/react-native-paper

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

Aperta
#4,606 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
bug Menu
Lingua principale
TypeScript
Stelle
14.5k
Fork
2.2k
Merge medio
5g 23h
PR unite (30g)
12

Descrizione

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

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Riproduci il caso fornito di Menu e Searchbar con react-native-paper 5.13.1 su expo-web e react-native-web, utilizzando le versioni dell’ambiente elencate. Quindi traccia il comportamento di chiusura di Menu e quello di focus/blur di Searchbar; il lavoro è completato quando facendo clic su Searchbar il modal rimane visibile senza attivare la chiusura indesiderata.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native, typescript
Ambito
frontend, web-dev
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.