callstack / callstack/react-native-paper

Menu component closes and fails to open again on re-render

Đang mở
#4,763 26 bình luận 15 reaction 0 người được giao Xem trên GitHub
bug
Ngôn ngữ chính
TypeScript
Star
14.5k
Fork
2.2k
Merge trung bình
5 ngày 23 giờ
Pull request đã merge (30 ngày)
12

Mô tả

### Current behaviour
- Open the Menu component
- The parent component re-renders
- Menu component closes and can't be opened again

### Expected behaviour
- Open the Menu component
- The parent component re-renders
- Menu component stays open

### How to reproduce?
```TSX
import React, {useState} from 'react';
import {View} from 'react-native';
import {Button, Menu, PaperProvider} from 'react-native-paper';

const MyComponent = () => {
const [randomVarialbeToForceRerender, setRandomVarialbeToForceRerender] =
useState(0);
const [visible, setVisible] = useState(false);

const openMenu = () => {
console.debug('Opening menu');
setVisible(true);

/**
* We update a state variable to force a re-render of the component.
* A real-world example could be a network request or some other
* asynchronous operation that updates the state.
*/
setTimeout(() => setRandomVarialbeToForceRerender(Math.random()), 1000);
};

const closeMenu = () => {
setVisible(false);
console.debug('Closing menu');
};

console.debug('visible', visible);
return (


Show menu}>
{}}
title={`Random ${randomVarialbeToForceRerender}`}
/>



);
};

export default MyComponent;
```

### Preview
https://github.com/user-attachments/assets/3d995026-ab4e-4fd3-bbf3-5544164a63ec

### What have you tried so far?
Memoization to avoid re-rendering the menu. However, this approach is limited and breaks
when the menu items are non-static (c.f. example)

### Your Environment

| software | version
| --------------------- | -------
| ios | 18.5
| android | x
| react-native | 0.77.2
| react-native-paper | 5.13.1
| node | 18.20.8
| npm or yarn | 3.8.7
| expo sdk | x.x.x

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.