@@ -7,6 +7,7 @@ import { getNextActiveElement, isRTL } from '../../utils'
77
88import type { Alignments } from './types'
99import { getPlacement } from './utils'
10+ import { CFocusTrap } from '../focus-trap'
1011
1112const CDropdown = defineComponent ( {
1213name :'CDropdown' ,
@@ -217,7 +218,8 @@ const CDropdown = defineComponent({
217218window . removeEventListener ( 'click' , handleClick )
218219window . removeEventListener ( 'keyup' , handleKeyup )
219220dropdownMenuRef . value && dropdownMenuRef . value . removeEventListener ( 'keydown' , handleKeydown )
220- dropdownToggleRef . value && dropdownToggleRef . value . removeEventListener ( 'keydown' , handleKeydown )
221+ dropdownToggleRef . value &&
222+ dropdownToggleRef . value . removeEventListener ( 'keydown' , handleKeydown )
221223emit ( 'hide' )
222224} )
223225
@@ -315,22 +317,27 @@ const CDropdown = defineComponent({
315317provide ( 'setVisible' , setVisible )
316318
317319return ( ) =>
318- props . variant === 'input-group'
319- ?[ slots . default && slots . default ( ) ]
320- :h (
321- 'div' ,
322- {
323- class :[
324- props . variant === 'nav-item' ?'nav-item dropdown' :props . variant ,
325- props . direction === 'center'
326- ?'dropdown-center'
327- :props . direction === 'dropup-center'
328- ?'dropup dropup-center'
329- :props . direction ,
330- ] ,
331- } ,
332- slots . default && slots . default ( )
333- )
320+ h (
321+ CFocusTrap ,
322+ { active :props . teleport && visible . value , additionalContainer :dropdownMenuRef } ,
323+ ( ) =>
324+ props . variant === 'input-group'
325+ ?[ slots . default && slots . default ( ) ]
326+ :h (
327+ 'div' ,
328+ {
329+ class :[
330+ props . variant === 'nav-item' ?'nav-item dropdown' :props . variant ,
331+ props . direction === 'center'
332+ ?'dropdown-center'
333+ :props . direction === 'dropup-center'
334+ ?'dropup dropup-center'
335+ :props . direction ,
336+ ] ,
337+ } ,
338+ slots . default && slots . default ( )
339+ )
340+ )
334341} ,
335342} )
336343