diff --git a/api-generator/components/listbox.js b/api-generator/components/listbox.js
index 5b150d9668..24eebe8de8 100644
--- a/api-generator/components/listbox.js
+++ b/api-generator/components/listbox.js
@@ -59,6 +59,18 @@ const ListBoxProps = [
default: 'null',
description: 'Custom template for the filter element.'
},
+ {
+ name: 'emptyMessage',
+ type: 'string',
+ default: 'No results found',
+ description: 'Text to display when there are no options available.'
+ },
+ {
+ name: 'emptyFilterMessage',
+ type: 'any',
+ default: 'No results found',
+ description: 'Template to display when filtering does not return any results.'
+ },
{
name: 'optionGroupTemplate',
type: 'any',
diff --git a/components/doc/listbox/apidoc.js b/components/doc/listbox/apidoc.js
index 5bfb0fcd26..fde482ce07 100644
--- a/components/doc/listbox/apidoc.js
+++ b/components/doc/listbox/apidoc.js
@@ -67,6 +67,18 @@ export function ApiDoc(props) {
null |
Property name or getter function that refers to the children options of option group. |
+
+ emptyMessage |
+ string |
+ No results found |
+ Text to display when there are no options available. |
+
+
+ emptyFilterMessage |
+ any |
+ No results found |
+ Template to display when filtering does not return any results. |
+
itemTemplate |
any |
diff --git a/components/lib/listbox/ListBox.js b/components/lib/listbox/ListBox.js
index 6b5d057bf5..052fe45da3 100644
--- a/components/lib/listbox/ListBox.js
+++ b/components/lib/listbox/ListBox.js
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { FilterService } from '../api/Api';
+import { FilterService, localeOption } from '../api/Api';
import { useMountEffect } from '../hooks/Hooks';
import { Tooltip } from '../tooltip/Tooltip';
import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
@@ -343,7 +343,19 @@ export const ListBox = React.memo(
};
const createItems = () => {
- return visibleOptions ? visibleOptions.map(createItem) : null;
+ if (ObjectUtils.isNotEmpty(visibleOptions)) {
+ return visibleOptions.map(createItem);
+ } else if (hasFilter) {
+ return createEmptyMessage(props.emptyFilterMessage, true);
+ }
+
+ return createEmptyMessage(props.emptyMessage);
+ };
+
+ const createEmptyMessage = (emptyMessage, isFilter) => {
+ const message = ObjectUtils.getJSXElement(emptyMessage, props) || localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
+
+ return {message};
};
const createList = () => {
@@ -411,36 +423,38 @@ export const ListBox = React.memo(
ListBox.displayName = 'ListBox';
ListBox.defaultProps = {
__TYPE: 'ListBox',
- id: null,
- value: null,
- options: null,
- optionLabel: null,
- optionValue: null,
- optionDisabled: null,
- optionGroupLabel: null,
- optionGroupChildren: null,
- optionGroupTemplate: null,
- itemTemplate: null,
- style: null,
- listStyle: null,
- listClassName: null,
className: null,
- virtualScrollerOptions: null,
- disabled: null,
dataKey: null,
- multiple: false,
- metaKeySelection: false,
+ disabled: null,
+ emptyFilterMessage: null,
+ emptyMessage: null,
filter: false,
- filterTemplate: null,
filterBy: null,
- filterValue: null,
+ filterInputProps: null,
+ filterLocale: undefined,
filterMatchMode: 'contains',
filterPlaceholder: null,
- filterLocale: undefined,
- filterInputProps: null,
+ filterTemplate: null,
+ filterValue: null,
+ id: null,
+ itemTemplate: null,
+ listClassName: null,
+ listStyle: null,
+ metaKeySelection: false,
+ multiple: false,
+ onChange: null,
+ onFilterValueChange: null,
+ optionDisabled: null,
+ optionGroupChildren: null,
+ optionGroupLabel: null,
+ optionGroupTemplate: null,
+ optionLabel: null,
+ optionValue: null,
+ options: null,
+ style: null,
tabIndex: 0,
tooltip: null,
tooltipOptions: null,
- onChange: null,
- onFilterValueChange: null
+ value: null,
+ virtualScrollerOptions: null
};
diff --git a/components/lib/listbox/listbox.d.ts b/components/lib/listbox/listbox.d.ts
index 0cb0394a33..3b039459f6 100755
--- a/components/lib/listbox/listbox.d.ts
+++ b/components/lib/listbox/listbox.d.ts
@@ -9,6 +9,10 @@ type ListBoxItemTemplateType = React.ReactNode | ((option: any) => React.ReactNo
type ListBoxFilterTemplateType = React.ReactNode | ((options: ListBoxFilterTemplateOptions) => React.ReactNode);
+type ListBoxEmptyMessageType = React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
+
+type ListBoxEmptyFilterMessageType = React.ReactNode | ((props: ListBoxProps) => React.ReactNode);
+
type ListBoxOptionDisabledType = string | ((option: any) => boolean);
interface ListBoxChangeTargetOptions {
@@ -53,6 +57,8 @@ export interface ListBoxProps extends Omit