callstack / callstack/react-native-paper

Modal will appear once more when its mask is clicked.

Đang mở
#4,140 20 bình luận 16 reaction 0 người được giao Xem trên GitHub
bug Modal needs follow up
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

Modal appears once more before close when its mask is clicked.

### Expected behaviour

Modal disappears directly when its mask is clicked.

### How to reproduce?

```js
import * as React from 'react';
import { Modal, Portal, Text, Button, PaperProvider } from 'react-native-paper';

const MyComponent = () => {
const [visible, setVisible] = React.useState(false);

const showModal = () => setVisible(true);
const hideModal = () => setVisible(false);
const containerStyle = {backgroundColor: 'white', padding: 20};

return (



Example Modal. Click outside this area to dismiss.



Show


);
};

export default MyComponent;
```

### Preview

https://github.com/callstack/react-native-paper/assets/42693551/eca1a8b4-eeaf-49d9-8c03-ecdc3f5757f9

### My suggestion

![suggestion](https://github.com/callstack/react-native-paper/assets/42693551/038747f3-76c9-4254-a7aa-2de9e5e0d6ec)

The current behavior is expected by the test case, which prevents my changes from passing all tests.

```shell
$ jest Modal
FAIL src/components/__tests__/Modal.test.tsx
Modal
√ animated value changes correctly (81 ms)
by default
√ should render passed children (255 ms)
√ should render a backdrop in default theme's color (14 ms)
√ should render a custom backdrop color if specified (8 ms)
√ should receive appropriate top and bottom insets (11 ms)
when open
if closed via touching backdrop
× will run the animation but not fade out (57 ms)
√ should invoke the onDismiss function after the animation (16 ms)
if closed via Android back button
√ will run the animation but not fade out (27 ms)
× should invoke the onDismiss function after the animation (32 ms)
when open as non-dismissible modal
if closed via touching backdrop
√ will run the animation but not fade out (15 ms)
√ should not invoke onDismiss (13 ms)
if closed via Android back button
√ will run the animation but not fade out (14 ms)
√ should not invoke onDismiss (11 ms)
when visible prop changes
from false to true (closed to open)
√ should run fade-in animation on opening (12 ms)
from true to false (open to closed)
√ should run fade-out animation on closing (16 ms)
√ should not invoke onDismiss (12 ms)
√ should close even if the dialog is not dismissible (12 ms)
when visible prop changes again during the open/close animation
while closing, back to true (visible)
√ should keep the modal open (23 ms)
while opening, back to false (hidden)
√ should keep the modal closed (20 ms)

● Modal › when open › if closed via touching backdrop › will run the animation but not fade out

expect(element).toHaveStyle()

- Expected

- opacity: 1;
+ opacity: 0;

123 | });
124 |
> 125 | expect(getByTestId('modal-backdrop')).toHaveStyle({
| ^
126 | opacity: 1,
127 | });
128 |

at Object.toHaveStyle (src/components/__tests__/Modal.test.tsx:125:47)
at asyncGeneratorStep (node_modules/@babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (node_modules/@babel/runtime/helpers/asyncToGenerator.js:22:9)
at node_modules/@babel/runtime/helpers/asyncToGenerator.js:27:7
at Object. (node_modules/@babel/runtime/helpers/asyncToGenerator.js:19:12)

● Modal › when open › if closed via Android back button › should invoke the onDismiss function after the animation

expect(jest.fn()).toHaveBeenCalledTimes(expected)

Expected number of calls: 1
Received number of calls: 0

210 | });
211 |
> 212 | expect(onDismiss).toHaveBeenCalledTimes(1);
| ^
213 | });
214 | });
215 | });

at Object.toHaveBeenCalledTimes (src/components/__tests__/Modal.test.tsx:212:27)

Test Suites: 1 failed, 1 total
Tests: 2 failed, 17 passed, 19 total
Snapshots: 0 total
Time: 1.789 s, estimated 2 s
```

### Your Environment

| software | version
| ------------------------| -------
| android | 12
| react-native | 0.72.5
| react-native-paper | 5.10.4
| node | 18.12.1
| yarn | 1.22.19

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

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

Hướng nghiên cứu

Bắt đầu bằng cách chạy các test của Modal trong src/components/__tests__/Modal.test.tsx, tập trung vào các trường hợp backdrop-touch và Android back-button. Theo dõi hành vi của Modal được các test đó kiểm tra và so sánh với reproduction đã được báo cáo. Được xem là hoàn tất khi dismiss bằng mask đóng trực tiếp và các test liên quan đều pass mà không làm hồi quy các trường hợp khác.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
react-native, typescript
Lĩnh vực
mobile
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức độ hoạt động
Đình trệ
Độ rõ ràng
Đặc tả rõ ràng
Mức phù hợp với người mới
52/100

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.