Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Commit 44905e8

Browse filesBrowse files
committed
fix(CPopover, CTooltip): prevent body scrolling when the component is added and removed from the DOM
1 parent f92c83c commit 44905e8
Copy full SHA for 44905e8

File tree

2 files changed

+37
-23
lines changed
Filter options

2 files changed

+37
-23
lines changed

‎packages/coreui-react/src/components/popover/CPopover.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/popover/CPopover.tsx
+19-12Lines changed: 19 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,7 +96,7 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
9696
},
9797
ref,
9898
) => {
99-
const popoverRef = useRef(null)
99+
const popoverRef = useRef<HTMLDivElement>(null)
100100
const togglerRef = useRef(null)
101101
const forkedRef = useForkedRef(ref, popoverRef)
102102
const uID = useRef(`popover${Math.floor(Math.random() * 1_000_000)}`)
@@ -134,16 +134,6 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
134134
setVisible(visible)
135135
}, [visible])
136136

137-
useEffect(() => {
138-
if (_visible && togglerRef.current && popoverRef.current) {
139-
initPopper(togglerRef.current, popoverRef.current, popperConfig)
140-
}
141-
142-
return () => {
143-
destroyPopper()
144-
}
145-
}, [_visible])
146-
147137
const toggleVisible = (visible: boolean) => {
148138
if (visible) {
149139
setTimeout(() => setVisible(true), _delay.show)
@@ -177,8 +167,22 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
177167
in={_visible}
178168
mountOnEnter
179169
nodeRef={popoverRef}
180-
onEnter={onShow}
170+
onEnter={() => {
171+
if (togglerRef.current && popoverRef.current) {
172+
initPopper(togglerRef.current, popoverRef.current, popperConfig)
173+
}
174+
175+
onShow
176+
}}
177+
onEntering={() => {
178+
if (togglerRef.current && popoverRef.current) {
179+
popoverRef.current.style.display = 'initial'
180+
}
181+
}}
181182
onExit={onHide}
183+
onExited={() => {
184+
destroyPopper()
185+
}}
182186
timeout={{
183187
enter: 0,
184188
exit: popoverRef.current
@@ -201,6 +205,9 @@ export const CPopover = forwardRef<HTMLDivElement, CPopoverProps>(
201205
id={uID.current}
202206
ref={forkedRef}
203207
role="tooltip"
208+
style={{
209+
display: 'none',
210+
}}
204211
{...rest}
205212
>
206213
<div className="popover-arrow"></div>

‎packages/coreui-react/src/components/tooltip/CTooltip.tsx

Copy file name to clipboardExpand all lines: packages/coreui-react/src/components/tooltip/CTooltip.tsx
+18-11Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -128,16 +128,6 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
128128
setVisible(visible)
129129
}, [visible])
130130

131-
useEffect(() => {
132-
if (_visible && togglerRef.current && tooltipRef.current) {
133-
initPopper(togglerRef.current, tooltipRef.current, popperConfig)
134-
}
135-
136-
return () => {
137-
destroyPopper()
138-
}
139-
}, [_visible])
140-
141131
const toggleVisible = (visible: boolean) => {
142132
if (visible) {
143133
setTimeout(() => setVisible(true), _delay.show)
@@ -171,8 +161,22 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
171161
in={_visible}
172162
mountOnEnter
173163
nodeRef={tooltipRef}
174-
onEnter={onShow}
164+
onEnter={() => {
165+
if (togglerRef.current && tooltipRef.current) {
166+
initPopper(togglerRef.current, tooltipRef.current, popperConfig)
167+
}
168+
169+
onShow
170+
}}
171+
onEntering={() => {
172+
if (togglerRef.current && tooltipRef.current) {
173+
tooltipRef.current.style.display = 'initial'
174+
}
175+
}}
175176
onExit={onHide}
177+
onExited={() => {
178+
destroyPopper()
179+
}}
176180
timeout={{
177181
enter: 0,
178182
exit: tooltipRef.current
@@ -195,6 +199,9 @@ export const CTooltip = forwardRef<HTMLDivElement, CTooltipProps>(
195199
id={uID.current}
196200
ref={forkedRef}
197201
role="tooltip"
202+
style={{
203+
display: 'none',
204+
}}
198205
{...rest}
199206
>
200207
<div className="tooltip-arrow"></div>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.