diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
index 9d8164b4c6..c2e47e0301 100644
--- a/api-generator/components/multiselect.js
+++ b/api-generator/components/multiselect.js
@@ -304,6 +304,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..c2c48b50d2 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 |
@@ -207,6 +213,12 @@ export function ApiDoc(props) {
null |
Function that gets the option and returns the content for it. |
+
+ itemClassName |
+ string |
+ bull |
+ Style class of the items. |
+
filterTemplate |
any |
@@ -319,6 +331,18 @@ export function ApiDoc(props) {
false |
Whether all data is selected. |
+
+ inline |
+ boolean |
+ false |
+ Render the items panel inline. |
+
+
+ flex |
+ boolean |
+ false |
+ Use flex layout for the items panel. |
+
diff --git a/components/lib/multiselect/MultiSelect.js b/components/lib/multiselect/MultiSelect.js
index 49ee1c26db..83bd730bf4 100644
--- a/components/lib/multiselect/MultiSelect.js
+++ b/components/lib/multiselect/MultiSelect.js
@@ -538,6 +538,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();
@@ -696,6 +702,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
old mode 100755
new mode 100644
index 2362516b45..f9688493b7
--- 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,67 +74,68 @@ 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;
+ flex?: boolean;
id?: string;
+ inline?: boolean;
+ inputId?: string;
inputRef?: React.Ref;
+ itemClassName?: string;
+ 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;
- inline?: boolean;
- flex?: boolean;
- style?: React.CSSProperties;
- className?: string;
- itemClassName?: 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 {