Skip to content

Commit 5a25d7e

Browse files
committed
fix(CModal): remove click outside listener when the modal is closing
1 parent 5a25e49 commit 5a25d7e

File tree

2 files changed

+32
-11
lines changed

2 files changed

+32
-11
lines changed

packages/coreui-react/src/components/modal/CModal.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
142142
return setStaticBackdrop(true)
143143
}
144144

145+
setVisible(false)
145146
return onClose && onClose()
146147
}
147148

@@ -174,6 +175,7 @@ export const CModal = forwardRef<HTMLDivElement, CModalProps>(
174175
document.body.style.removeProperty('padding-right')
175176
}
176177
}
178+
177179
return () => {
178180
document.body.classList.remove('modal-open')
179181
if (backdrop) {

packages/docs/content/components/modal.mdx

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,18 +26,33 @@ import {
2626

2727
Below is a static react modal component example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include react modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
2828

29-
```jsx preview
30-
<CModal
31-
className="show d-block position-static"
32-
backdrop={false}
33-
keyboard={false}
34-
portal={false}
35-
visible
36-
>
29+
<Example>
30+
<div className="modal position-static d-block" tabIndex="-1">
31+
<div className="modal-dialog">
32+
<div className="modal-content">
33+
<div className="modal-header">
34+
<h5 className="modal-title">React Modal title</h5>
35+
<button type="button" className="btn-close" aria-label="Close"></button>
36+
</div>
37+
<div className="modal-body">
38+
<p>React Modal body text goes here.</p>
39+
</div>
40+
<div className="modal-footer">
41+
<button type="button" className="btn btn-secondary">Close</button>
42+
<button type="button" className="btn btn-primary">Save changes</button>
43+
</div>
44+
</div>
45+
</div>
46+
</div>
47+
</Example>
48+
```jsx
49+
<CModal>
3750
<CModalHeader>
3851
<CModalTitle>React Modal title</CModalTitle>
3952
</CModalHeader>
40-
<CModalBody>React Modal body text goes here.</CModalBody>
53+
<CModalBody>
54+
<p>React Modal body text goes here.</p>
55+
</CModalBody>
4156
<CModalFooter>
4257
<CButton color="secondary">Close</CButton>
4358
<CButton color="primary">Save changes</CButton>
@@ -58,7 +73,9 @@ export const LiveDemoExample = () => {
5873
<CModalHeader>
5974
<CModalTitle>Modal title</CModalTitle>
6075
</CModalHeader>
61-
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
76+
<CModalBody>
77+
<p>Woohoo, you're reading this text in a modal!</p>
78+
</CModalBody>
6279
<CModalFooter>
6380
<CButton color="secondary" onClick={() => setVisible(false)}>
6481
Close
@@ -83,7 +100,9 @@ return (
83100
<CModalHeader onClose={() => setVisible(false)}>
84101
<CModalTitle>Modal title</CModalTitle>
85102
</CModalHeader>
86-
<CModalBody>Woohoo, you're reading this text in a modal!</CModalBody>
103+
<CModalBody>
104+
<p>Woohoo, you're reading this text in a modal!</p>
105+
</CModalBody>
87106
<CModalFooter>
88107
<CButton color="secondary" onClick={() => setVisible(false)}>
89108
Close

0 commit comments

Comments
 (0)