diff --git a/packages/core/src/modal/modal.tsx b/packages/core/src/modal/modal.tsx index 55dabb10..1a272066 100644 --- 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 index 84159fab..f4e90a45 100644 --- 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 index 71af841e..5ee46fa5 100644 --- 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)