Fix #3302: Multiselect add overlayVisible property

primefaces · Nov 25, 2022 · fa809e7 · fa809e7
1 parent 6a2e29a
commit fa809e7
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 43 deletions.
diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
@@ -286,6 +286,12 @@ const MultiSelectProps = [
         type: 'boolean',
         default: 'false',
         description: 'Defaults to the option itself as the value of an option. Overrides the optionValue prop.'
+    },
+    {
+        name: 'overlayVisible',
+        type: 'boolean',
+        default: 'false',
+        description: 'Specifies the visibility of the overlay panel.'
     }
 ];
 

diff --git a/components/doc/multiselect/apidoc.js b/components/doc/multiselect/apidoc.js
@@ -99,6 +99,12 @@ export function ApiDoc(props) {
                                 <td>null</td>
                                 <td>Inline style of the overlay panel element.</td>
                             </tr>
+                            <tr>
+                                <td>overlayVisible</td>
+                                <td>boolean</td>
+                                <td>false</td>
+                                <td>Specifies the visibility of the overlay panel.</td>
+                            </tr>
                             <tr>
                                 <td>scrollHeight</td>
                                 <td>string</td>

diff --git a/components/doc/multiselect/basicdoc.js b/components/doc/multiselect/basicdoc.js
@@ -4,6 +4,7 @@ import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
 export function BasicDoc(props) {
+    const [enabled, setEnabled] = useState(true);
     const [selectedCities, setSelectedCities] = useState(null);
     const cities = [
         { name: 'New York', code: 'NY' },
@@ -68,7 +69,8 @@ export default function BasicDoc() {
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <MultiSelect value={selectedCities} options={cities} onChange={(e) => setSelectedCities(e.value)} optionLabel="name" placeholder="Select a City" maxSelectedLabels={3} />
+                <MultiSelect value={selectedCities} options={cities} onChange={(e) => setSelectedCities(e.value)} optionLabel="name" placeholder="Select a City" maxSelectedLabels={3} overlayVisible={enabled} />
+                <button onClick={() => setEnabled(!enabled)} />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
@@ -534,6 +534,12 @@ export const MultiSelect = React.memo(
             ObjectUtils.combinedRefs(inputRef, props.inputRef);
         }, [inputRef, props.inputRef]);
 
+        React.useEffect(() => {
+            setTimeout(() => {
+                props.overlayVisible ? show() : hide();
+            }, 100);
+        }, [props.overlayVisible]);
+
         useUpdateEffect(() => {
             if (overlayVisibleState && hasFilter) {
                 alignOverlay();
@@ -685,6 +691,7 @@ MultiSelect.defaultProps = {
     optionLabel: null,
     optionValue: null,
     options: null,
+    overlayVisible: false,
     panelClassName: null,
     panelFooterTemplate: null,
     panelHeaderTemplate: null,

diff --git a/components/lib/multiselect/multiselect.d.ts b/components/lib/multiselect/multiselect.d.ts
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import TooltipOptions from '../tooltip/tooltipoptions';
 import { CSSTransitionProps } from '../csstransition';
+import { SelectItemOptionsType } from '../selectitem/selectitem';
+import TooltipOptions from '../tooltip/tooltipoptions';
 import { IconType } from '../utils';
 import { VirtualScrollerProps } from '../virtualscroller';
-import { SelectItemOptionsType } from '../selectitem/selectitem';
 
 type MultiSelectOptionGroupTemplateType = React.ReactNode | ((option: any, index: number) => React.ReactNode);
 
@@ -74,64 +74,65 @@ interface MultiSelectFilterOptions {
 }
 
 export interface MultiSelectProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLDivElement>, HTMLDivElement>, 'onChange' | 'ref'> {
+    appendTo?: MultiSelectAppendToType;
+    ariaLabelledBy?: string;
+    children?: React.ReactNode;
+    className?: string;
+    dataKey?: string;
+    disabled?: boolean;
+    display?: MultiSelectDisplayType;
+    dropdownIcon?: IconType<MultiSelectProps>;
+    emptyFilterMessage?: MultiSelectEmptyFilterMessageType;
+    filter?: boolean;
+    filterBy?: string;
+    filterLocale?: string;
+    filterMatchMode?: string;
+    filterPlaceholder?: string;
+    filterTemplate?: MultiSelectFilterTemplateType;
+    fixedPlaceholder?: boolean;
     id?: string;
+    inputId?: string;
     inputRef?: React.Ref<HTMLSelectElement>;
+    itemTemplate?: MultiSelectItemTemplateType;
+    maxSelectedLabels?: number;
     name?: string;
-    value?: any;
-    options?: SelectItemOptionsType;
-    optionLabel?: string;
-    optionValue?: string;
     optionDisabled?: MultiSelectOptionDisabledType;
-    optionGroupLabel?: string;
     optionGroupChildren?: string;
+    optionGroupLabel?: string;
     optionGroupTemplate?: MultiSelectOptionGroupTemplateType;
-    display?: MultiSelectDisplayType;
-    style?: React.CSSProperties;
-    className?: string;
+    optionLabel?: string;
+    optionValue?: string;
+    options?: SelectItemOptionsType;
+    overlayVisible?: boolean;
     panelClassName?: string;
+    panelFooterTemplate?: MultiSelectPanelFooterTemplateType;
+    panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType;
     panelStyle?: React.CSSProperties;
-    virtualScrollerOptions?: VirtualScrollerProps;
-    scrollHeight?: string;
     placeholder?: string;
-    fixedPlaceholder?: boolean;
-    disabled?: boolean;
-    showClear?: boolean;
-    filter?: boolean;
-    filterBy?: string;
-    filterMatchMode?: string;
-    filterPlaceholder?: string;
-    filterLocale?: string;
-    emptyFilterMessage?: MultiSelectEmptyFilterMessageType;
+    removeIcon?: IconType<MultiSelectProps>;
     resetFilterOnHide?: boolean;
+    scrollHeight?: string;
+    selectAll?: boolean;
+    selectedItemTemplate?: MultiSelectSelectedItemTemplateType;
+    selectedItemsLabel?: string;
+    selectionLimit?: number;
+    showClear?: boolean;
+    showSelectAll?: boolean;
+    style?: React.CSSProperties;
     tabIndex?: number;
-    dataKey?: string;
-    inputId?: string;
-    appendTo?: MultiSelectAppendToType;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    maxSelectedLabels?: number;
-    selectionLimit?: number;
-    selectedItemsLabel?: string;
-    ariaLabelledBy?: string;
-    itemTemplate?: MultiSelectItemTemplateType;
-    filterTemplate?: MultiSelectFilterTemplateType;
-    selectedItemTemplate?: MultiSelectSelectedItemTemplateType;
-    panelHeaderTemplate?: MultiSelectPanelHeaderTemplateType;
-    panelFooterTemplate?: MultiSelectPanelFooterTemplateType;
     transitionOptions?: CSSTransitionProps;
-    dropdownIcon?: IconType<MultiSelectProps>;
-    removeIcon?: IconType<MultiSelectProps>;
-    showSelectAll?: boolean;
-    selectAll?: boolean;
+    useOptionAsValue?: boolean;
+    value?: any;
+    virtualScrollerOptions?: VirtualScrollerProps;
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
     onChange?(e: MultiSelectChangeParams): void;
+    onFilter?(e: MultiSelectFilterParams): void;
     onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
-    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
-    onShow?(): void;
     onHide?(): void;
-    onFilter?(e: MultiSelectFilterParams): void;
     onSelectAll?(e: MultiSelectAllParams): void;
-    children?: React.ReactNode;
-    useOptionAsValue?: boolean;
+    onShow?(): void;
 }
 
 export declare class MultiSelect extends React.Component<MultiSelectProps, any> {