Fix primefaces#4819: Overlay better handling of dissmissible

melloware · Aug 25, 2023 · 047ee5c · 047ee5c
1 parent 5cee939
commit 047ee5c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/components/doc/overlaypanel/datatabledoc.js b/components/doc/overlaypanel/datatabledoc.js
@@ -132,7 +132,7 @@ export default function DataTableDemo() {
             <Toast ref={toast} />
             <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
             {selectedProductContent}
-            <OverlayPanel ref={op} showCloseIcon>
+            <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
                 <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
                     <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
                     <Column header="Image" body={imageBody} />
@@ -206,7 +206,7 @@ export default function DataTableDemo() {
             <Toast ref={toast} />
             <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
             {selectedProductContent}
-            <OverlayPanel ref={op} showCloseIcon>
+            <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
                 <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
                     <Column field="name" header="Name" sortable style={{minWidth: '12rem'}} />
                     <Column header="Image" body={imageBody} />
@@ -238,13 +238,16 @@ export default function DataTableDemo() {
     return (
         <>
             <DocSectionText {...props}>
-                <p>An example that displays a DataTable inside a popup to select an item.</p>
+                <p>
+                    An example that displays a DataTable inside a popup to select an item. <i>closeOnEscape</i> is enabled to close the popop when ESC is pressed. The <i>dismissable</i> property when set to <i>false</i> will not close the popup when
+                    the document is clicked outside the popup.
+                </p>
             </DocSectionText>
             <div className="card flex flex-column align-items-center gap-3">
                 <Toast ref={toast} />
                 <Button type="button" icon="pi pi-search" label="Search" onClick={(e) => op.current.toggle(e)} />
                 {selectedProductContent}
-                <OverlayPanel ref={op} showCloseIcon>
+                <OverlayPanel ref={op} showCloseIcon closeOnEscape dismissable={false}>
                     <DataTable value={products} selectionMode="single" paginator rows={5} selection={selectedProduct} onSelectionChange={(e) => setSelectedProduct(e.value)}>
                         <Column field="name" header="Name" sortable style={{ minWidth: '12rem' }} />
                         <Column header="Image" body={imageBody} />

diff --git a/components/lib/overlaypanel/OverlayPanel.js b/components/lib/overlaypanel/OverlayPanel.js
@@ -39,7 +39,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
             if (valid) {
                 switch (type) {
                     case 'outside':
-                        props.dismissable ? !isPanelClicked.current && hide() : hide();
+                        props.dismissable && !isPanelClicked.current && hide();
                         break;
                     case 'resize':
                     case 'scroll':
@@ -54,7 +54,7 @@ export const OverlayPanel = React.forwardRef((inProps, ref) => {
         when: visibleState
     });
 
-    useOnEscapeKey(overlayEventListener, props.dismissable && props.closeOnEscape, () => {
+    useOnEscapeKey(overlayEventListener, props.closeOnEscape, () => {
         hide();
     });