callstack / callstack/react-native-paper
Modal will appear once more when its mask is clicked.
- 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

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