diff --git a/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx b/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx index a504903b..b05335c9 100644 --- a/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx +++ b/packages/coreui-react/src/components/offcanvas/COffcanvas.tsx @@ -11,7 +11,7 @@ export interface COffcanvasProps extends HTMLAttributes<HTMLDivElement> { /** * Apply a backdrop on body while offcanvas is open. */ - backdrop?: boolean + backdrop?: boolean | 'static' /** * A string of all className you want applied to the base component. */ @@ -105,6 +105,12 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>( const handleDismiss = () => { setVisible(false) } + + const handleBackdropDismiss = () => { + if (backdrop !== 'static') { + setVisible(false) + } + } const handleKeyDown = useCallback( (event: React.KeyboardEvent<HTMLDivElement>) => { @@ -154,7 +160,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>( createPortal( <CBackdrop className="offcanvas-backdrop" - onClick={handleDismiss} + onClick={handleBackdropDismiss} visible={_visible} />, document.body, @@ -162,7 +168,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>( : backdrop && ( <CBackdrop className="offcanvas-backdrop" - onClick={handleDismiss} + onClick={handleBackdropDismiss} visible={_visible} /> )} @@ -172,7 +178,7 @@ export const COffcanvas = forwardRef<HTMLDivElement, COffcanvasProps>( ) COffcanvas.propTypes = { - backdrop: PropTypes.bool, + backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf<'static'>(['static'])]), children: PropTypes.node, className: PropTypes.string, keyboard: PropTypes.bool,