callstack / callstack/react-native-paper

Modal will appear once more when its mask is clicked.

Open
#4,140 20 comments 16 reactions 0 assignees View on GitHub
bug Modal needs follow up
Dominant language
TypeScript
Stars
14.5k
Forks
2.2k
Avg merge
5d 23h
Merged PRs (30d)
12

Description

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

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.