make trapping focus optional

fold-dev · Jun 15, 2024 · 7a9be32 · 7a9be32
1 parent 7aaf970
commit 7a9be32
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/core/src/modal/modal.tsx b/packages/core/src/modal/modal.tsx
@@ -74,7 +74,6 @@ export const Modal = forwardRef((props: ModalProps, ref) => {
     const handleKeyDown = (e) => {
         const { isEscape } = getKey(e)
         if (isEscape && dismissOnEscape) onDismiss(e)
-            console.log('here')
     }
 
     const handleBackgroundClick = (e: any) => {

diff --git a/packages/core/src/popover/popover.tsx b/packages/core/src/popover/popover.tsx
@@ -27,6 +27,9 @@ export const PopoverContent = forwardRef((props: CoreViewProps, ref) => (
 export type PopoverAnchor = PopoutPosition
 
 export type PopoverProps = {
+    /**
+     * @description Be careful as this can have unintended consequences with other elements
+     */
     hardEscape?: boolean
     __focusTrapTimeoutDelay?: number
     focusTrap?: boolean
@@ -42,9 +45,9 @@ export type PopoverProps = {
 
 export const Popover = forwardRef((props: PopoverProps, ref) => {
     const {
-        hardEscape = true,
+        hardEscape,
         __focusTrapTimeoutDelay = 100,
-        focusTrap,
+        focusTrap = true,
         targetId,
         fixPosition,
         anchorProps = {},
@@ -73,19 +76,19 @@ export const Popover = forwardRef((props: PopoverProps, ref) => {
         [props.className, getPopoutClass(finalAnchor)]
     )
 
-    const dismissPopover = (e) => {
+    const dismissPopover = (e, refocus = true) => {
         e.preventDefault()
         e.stopPropagation()
         dispatchPopoverEvent('ondismiss', e)
         onDismiss(e)
         setReady(false)
-        childRef.current?.focus()
+        if (refocus) childRef.current?.focus()
     }
 
     const handleKeyDownDocument = (e) => {
         if (hardEscape) {
             const { isEscape } = getKey(e)
-            if (isEscape && onDismiss) dismissPopover(e)
+            if (isEscape && onDismiss) dismissPopover(e, false)
         }
 
     }

diff --git a/packages/core/src/select/select.tsx b/packages/core/src/select/select.tsx
@@ -35,6 +35,7 @@ import { IconLib } from '../icon'
 import { CoreViewProps, Size } from '../types'
 
 export type SelectProps = {
+    trapFocus?: boolean
     openOnFocus?: boolean
     openOnMount?: boolean
     noListFocus?: boolean
@@ -72,6 +73,7 @@ export type SelectProps = {
 
 export const Select = (props: SelectProps) => {
     const {
+        trapFocus = true,
         openOnFocus,
         openOnMount,
         noListFocus,
@@ -262,8 +264,10 @@ export const Select = (props: SelectProps) => {
         const { isUp, isDown, isEnter, isEscape, isTabNormal, isTabReverse } = getKey(e)
 
         if (isEscape && visible) {
-            e.preventDefault()
-            e.stopPropagation()
+            if (trapFocus) {
+                e.preventDefault()
+                e.stopPropagation()
+            }
             dismiss()
         }
 
@@ -281,7 +285,7 @@ export const Select = (props: SelectProps) => {
         // 1) filterable selects need focus on the input element (not just option)
         //    downside is that reverse-tabbing tabs to the previous element
         // 2) virtual elements behave similarly
-        if ((isTabNormal || isTabReverse) && visible) {
+        if ((isTabNormal || isTabReverse) && visible && trapFocus) {
             e.preventDefault()
             e.stopPropagation()
             if (isTabReverse) setCursor(cursor == 0 ? filteredOptions.length - 1 : cursor - 1)