Fixed #1459 - Add panelClassName and panelStyle for MultiSelect

primefaces · Sep 19, 2020 · de8af2e · de8af2e
1 parent b955668
commit de8af2e
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
@@ -10,6 +10,8 @@ interface MultiSelectProps {
     optionValue?: string;
     style?: object;
     className?: string;
+    panelClassName?: string;
+    panelStyle?: object;
     scrollHeight?: string;
     placeholder?: string;
     fixedPlaceholder?: boolean;

diff --git a/src/components/multiselect/MultiSelect.js b/src/components/multiselect/MultiSelect.js
@@ -22,6 +22,8 @@ export class MultiSelect extends Component {
         optionValue: null,
         style: null,
         className: null,
+        panelClassName: null,
+        panelStyle: null,
         scrollHeight: '200px',
         placeholder: null,
         fixedPlaceholder: false,
@@ -59,6 +61,8 @@ export class MultiSelect extends Component {
         optionValue: PropTypes.string,
         style: PropTypes.object,
         className: PropTypes.string,
+        panelClassName: PropTypes.string,
+        panelStyle: PropTypes.object,
         scrollHeight: PropTypes.string,
         placeholder: PropTypes.string,
         fixedPlaceholder: PropTypes.bool,
@@ -637,7 +641,7 @@ export class MultiSelect extends Component {
                 <CSSTransition classNames="p-connected-overlay" in={this.state.overlayVisible} timeout={{ enter: 120, exit: 100 }}
                     unmountOnExit onEnter={this.onOverlayEnter} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}>
                     <MultiSelectPanel ref={el => this.panel = el} header={header} appendTo={this.props.appendTo}
-                        scrollHeight={this.props.scrollHeight}>
+                        scrollHeight={this.props.scrollHeight} panelClassName={this.props.panelClassName} panelStyle={this.props.panelStyle}>
                         {items}
                     </MultiSelectPanel>
                 </CSSTransition>

diff --git a/src/components/multiselect/MultiSelectPanel.js b/src/components/multiselect/MultiSelectPanel.js
@@ -1,26 +1,32 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 
 export class MultiSelectPanel extends Component {
 
     static defaultProps = {
         appendTo: null,
         header: null,
         onClick: null,
-        scrollHeight: null
+        scrollHeight: null,
+        panelClassName: null,
+        panelStyle: null,
     };
 
     static propTypes = {
         appendTo: PropTypes.object,
         header: PropTypes.any,
         onClick: PropTypes.func,
-        scrollHeight: PropTypes.string
+        scrollHeight: PropTypes.string,
+        panelClassName: PropTypes.string,
+        panelStyle: PropTypes.object,
     };
 
     renderElement() {
+        const panelClassName = classNames('p-multiselect-panel p-component', this.props.panelClassName);
         return (
-            <div className="p-multiselect-panel p-component"
+            <div className={panelClassName} style={this.props.panelStyle}
                 ref={(el) => this.element = el} onClick={this.props.onClick}>
                 {this.props.header}
                 <div className="p-multiselect-items-wrapper" style={{ maxHeight: this.props.scrollHeight }}>