Fixed #1891 - Close multiselect dropdown on button click of panelFoot…

…erTemplate / Add onPanelShow & onPanelHide event
primefaces · Apr 12, 2021 · 1ec6e22 · 1ec6e22
1 parent 5741eda
commit 1ec6e22
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 6 deletions.
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -30,7 +30,7 @@ interface PanelHeaderTemplateParams {
 
 type PanelHeaderTemplateType = React.ReactNode | ((e: PanelHeaderTemplateParams) => React.ReactNode);
 
-type PanelFooterTemplateType = React.ReactNode | ((props: MultiSelectProps) => React.ReactNode);
+type PanelFooterTemplateType = React.ReactNode | ((props: MultiSelectProps, hide: () => void) => React.ReactNode);
 
 interface ChangeTargetOptions {
     name: string;
@@ -94,6 +94,8 @@ interface MultiSelectProps {
     onChange?(e: ChangeParams): void;
     onFocus?(event: React.FormEvent<HTMLInputElement>): void;
     onBlur?(event: React.FormEvent<HTMLInputElement>): void;
+    onPanelShow?(): void;
+    onPanelHide?(): void;
 }
 
 export class MultiSelect extends React.Component<MultiSelectProps, any> { }
diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -61,7 +61,9 @@ export class MultiSelect extends Component {
         transitionOptions: null,
         onChange: null,
         onFocus: null,
-        onBlur: null
+        onBlur: null,
+        onPanelShow: null,
+        onPanelHide: null
     };
 
     static propTypes = {
@@ -111,7 +113,9 @@ export class MultiSelect extends Component {
         transitionOptions: PropTypes.object,
         onChange: PropTypes.func,
         onFocus: PropTypes.func,
-        onBlur: PropTypes.func
+        onBlur: PropTypes.func,
+        onPanelShow: PropTypes.func,
+        onPanelHide: PropTypes.func
     };
 
     constructor(props) {
@@ -329,11 +333,15 @@ export class MultiSelect extends Component {
     }
 
     show() {
-        this.setState({ overlayVisible: true });
+        this.setState({ overlayVisible: true }, () => {
+            this.props.onPanelShow && this.props.onPanelShow();
+        });
     }
 
     hide() {
-        this.setState({ overlayVisible: false });
+        this.setState({ overlayVisible: false }, () => {
+            this.props.onPanelHide && this.props.onPanelHide();
+        });
     }
 
     onOverlayEnter() {
@@ -769,7 +777,7 @@ export class MultiSelect extends Component {
 
     renderFooter() {
         if (this.props.panelFooterTemplate) {
-            const content = ObjectUtils.getJSXElement(this.props.panelFooterTemplate, this.props);
+            const content = ObjectUtils.getJSXElement(this.props.panelFooterTemplate, this.props, this.hide);
 
             return (
                 <div className="p-multiselect-footer">