Fix #3649: Listbox emptyMessage, emptyFilterMessage

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',

components/doc/listbox/apidoc.js

@@ -67,6 +67,18 @@ export function ApiDoc(props) {
                             <td>null</td>
                             <td>Property name or getter function that refers to the children options of option group.</td>
                         </tr>
+                        <tr>
+                            <td>emptyMessage</td>
+                            <td>string</td>
+                            <td>No results found</td>
+                            <td>Text to display when there are no options available.</td>
+                        </tr>
+                        <tr>
+                            <td>emptyFilterMessage</td>
+                            <td>any</td>
+                            <td>No results found</td>
+                            <td>Template to display when filtering does not return any results.</td>
+                        </tr>
                         <tr>
                             <td>itemTemplate</td>
                             <td>any</td>

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 <li className="p-listbox-empty-message">{message}</li>;
         };
 
         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
 };

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<React.DetailedHTMLProps<React.InputHT
     children?: React.ReactNode;
     dataKey?: string;
     disabled?: boolean;
+    emptyMessage?: ListBoxEmptyMessageType;
+    emptyFilterMessage?: ListBoxEmptyFilterMessageType;
     filter?: boolean;
     filterBy?: string;
     filterInputProps?: any;