diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
index f8eb6130e2..49563000fd 100644
--- 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
index 028285e5c2..40499db948 100644
--- a/components/doc/multiselect/apidoc.js
+++ b/components/doc/multiselect/apidoc.js
@@ -99,6 +99,12 @@ export function ApiDoc(props) {
null |
Inline style of the overlay panel element. |
+
+ overlayVisible |
+ boolean |
+ false |
+ Specifies the visibility of the overlay panel. |
+
scrollHeight |
string |
diff --git a/components/doc/multiselect/basicdoc.js b/components/doc/multiselect/basicdoc.js
index 9dbcf0a7ff..676b0880aa 100644
--- 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() {
- setSelectedCities(e.value)} optionLabel="name" placeholder="Select a City" maxSelectedLabels={3} />
+ setSelectedCities(e.value)} optionLabel="name" placeholder="Select a City" maxSelectedLabels={3} overlayVisible={enabled} />
+
>
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index a63524bbae..b7b6e29577 100644
--- 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
index e9c58d3707..2e04d997e9 100755
--- 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, HTMLDivElement>, 'onChange' | 'ref'> {
+ appendTo?: MultiSelectAppendToType;
+ ariaLabelledBy?: string;
+ children?: React.ReactNode;
+ className?: string;
+ dataKey?: string;
+ disabled?: boolean;
+ display?: MultiSelectDisplayType;
+ dropdownIcon?: IconType;
+ emptyFilterMessage?: MultiSelectEmptyFilterMessageType;
+ filter?: boolean;
+ filterBy?: string;
+ filterLocale?: string;
+ filterMatchMode?: string;
+ filterPlaceholder?: string;
+ filterTemplate?: MultiSelectFilterTemplateType;
+ fixedPlaceholder?: boolean;
id?: string;
+ inputId?: string;
inputRef?: React.Ref;
+ 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;
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;
- removeIcon?: IconType;
- showSelectAll?: boolean;
- selectAll?: boolean;
+ useOptionAsValue?: boolean;
+ value?: any;
+ virtualScrollerOptions?: VirtualScrollerProps;
+ onBlur?(event: React.FocusEvent): void;
onChange?(e: MultiSelectChangeParams): void;
+ onFilter?(e: MultiSelectFilterParams): void;
onFocus?(event: React.FocusEvent): void;
- onBlur?(event: React.FocusEvent): 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 {