@@ -214,19 +214,6 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
214
214
const allowPopperUse = popper && typeof alignment !== 'object'
215
215
const Component = variant === 'nav-item' ? 'li' : as
216
216
217
- const contextValues = {
218
- alignment,
219
- container,
220
- dark,
221
- dropdownMenuRef,
222
- dropdownToggleRef,
223
- popper : allowPopperUse ,
224
- portal,
225
- variant,
226
- visible : _visible ,
227
- setVisible,
228
- }
229
-
230
217
const computedPopperConfig : Partial < Options > = useMemo ( ( ) => {
231
218
const defaultPopperConfig = {
232
219
modifiers : [
@@ -247,14 +234,28 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
247
234
} , [ offset , placement , direction , alignment , popperConfig ] )
248
235
249
236
useEffect ( ( ) => {
250
- setVisible ( visible )
237
+ if ( visible ) {
238
+ handleShow ( )
239
+ } else {
240
+ handleHide ( )
241
+ }
251
242
} , [ visible ] )
252
243
253
244
useEffect ( ( ) => {
254
245
const toggleElement = dropdownToggleElement
255
246
const menuElement = dropdownMenuRef . current
247
+ if ( allowPopperUse && menuElement && toggleElement && _visible ) {
248
+ initPopper ( toggleElement , menuElement , computedPopperConfig )
249
+ }
250
+ } , [ dropdownToggleElement ] )
251
+
252
+ const handleShow = ( ) => {
253
+ const toggleElement = dropdownToggleElement
254
+ const menuElement = dropdownMenuRef . current
255
+
256
+ if ( toggleElement && menuElement ) {
257
+ setVisible ( true )
256
258
257
- if ( _visible && toggleElement && menuElement ) {
258
259
if ( allowPopperUse ) {
259
260
initPopper ( toggleElement , menuElement , computedPopperConfig )
260
261
}
@@ -268,21 +269,26 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
268
269
269
270
onShow ?.( )
270
271
}
272
+ }
271
273
272
- return ( ) => {
273
- if ( allowPopperUse ) {
274
- destroyPopper ( )
275
- }
276
-
277
- toggleElement ?. removeEventListener ( 'keydown' , handleKeydown )
278
- menuElement ?. removeEventListener ( 'keydown' , handleKeydown )
274
+ const handleHide = ( ) => {
275
+ setVisible ( false )
279
276
280
- window . removeEventListener ( 'mouseup' , handleMouseUp )
281
- window . removeEventListener ( 'keyup' , handleKeyup )
277
+ const toggleElement = dropdownToggleElement
278
+ const menuElement = dropdownMenuRef . current
282
279
283
- onHide ?.( )
280
+ if ( allowPopperUse ) {
281
+ destroyPopper ( )
284
282
}
285
- } , [ dropdownToggleElement , _visible ] )
283
+
284
+ toggleElement ?. removeEventListener ( 'keydown' , handleKeydown )
285
+ menuElement ?. removeEventListener ( 'keydown' , handleKeydown )
286
+
287
+ window . removeEventListener ( 'mouseup' , handleMouseUp )
288
+ window . removeEventListener ( 'keyup' , handleKeyup )
289
+
290
+ onHide ?.( )
291
+ }
286
292
287
293
const handleKeydown = ( event : KeyboardEvent ) => {
288
294
if (
@@ -305,7 +311,7 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
305
311
}
306
312
307
313
if ( event . key === 'Escape' ) {
308
- setVisible ( false )
314
+ handleHide ( )
309
315
}
310
316
}
311
317
@@ -323,11 +329,25 @@ export const CDropdown: PolymorphicRefForwardingComponent<'div', CDropdownProps>
323
329
( autoClose === 'inside' && dropdownMenuRef . current . contains ( event . target as HTMLElement ) ) ||
324
330
( autoClose === 'outside' && ! dropdownMenuRef . current . contains ( event . target as HTMLElement ) )
325
331
) {
326
- setTimeout ( ( ) => setVisible ( false ) , 1 )
332
+ setTimeout ( ( ) => handleHide ( ) , 1 )
327
333
return
328
334
}
329
335
}
330
336
337
+ const contextValues = {
338
+ alignment,
339
+ container,
340
+ dark,
341
+ dropdownMenuRef,
342
+ dropdownToggleRef,
343
+ handleHide,
344
+ handleShow,
345
+ popper : allowPopperUse ,
346
+ portal,
347
+ variant,
348
+ visible : _visible ,
349
+ }
350
+
331
351
return (
332
352
< CDropdownContext . Provider value = { contextValues } >
333
353
{ variant === 'input-group' ? (
0 commit comments