Fix #3244 Autocomplete: add emptyMessage property. (#3287)

* feat: add new attributes to the autocomplete component. * Replace the condition operator with more readable and effective. * Update AutoComplete.js * Update AutoCompletePanel.js Co-authored-by: Ulaş Turan <[email protected]> Co-authored-by: Melloware <[email protected]>
primefaces · Sep 13, 2022 · aabffa7 · aabffa7
1 parent a002857
commit aabffa7
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 88 deletions.
diff --git a/components/doc/autocomplete/index.js b/components/doc/autocomplete/index.js
@@ -856,6 +856,18 @@ itemTemplate(item) {
                                     <td>false</td>
                                     <td>Specifies if multiple values can be selected.</td>
                                 </tr>
+                                <tr>
+                                    <td>showEmptyMessage</td>
+                                    <td>boolean</td>
+                                    <td>false</td>
+                                    <td>Whether to show the empty message or not.</td>
+                                </tr>
+                                <tr>
+                                    <td>emptyMessage</td>
+                                    <td>string</td>
+                                    <td>No results found.</td>
+                                    <td>Text to display when there is no data. Defaults to global value in i18n translation configuration.</td>
+                                </tr>
                                 <tr>
                                     <td>minLength</td>
                                     <td>number</td>

diff --git a/components/lib/autocomplete/AutoComplete.js b/components/lib/autocomplete/AutoComplete.js
@@ -445,7 +445,7 @@ export const AutoComplete = React.memo(
 
         useUpdateEffect(() => {
             if (searchingState) {
-                ObjectUtils.isNotEmpty(props.suggestions) ? show() : hide();
+                ObjectUtils.isNotEmpty(props.suggestions) || props.showEmptyMessage ? show() : hide();
                 setSearchingState(false);
             }
         }, [props.suggestions]);
@@ -658,63 +658,64 @@ AutoComplete.defaultProps = {
     __TYPE: 'AutoComplete',
     id: null,
     inputRef: null,
-    'aria-label': null,
-    'aria-labelledby': null,
-    appendTo: null,
-    autoFocus: false,
+    value: null,
+    name: null,
+    type: 'text',
+    suggestions: null,
+    field: null,
+    optionGroupLabel: null,
+    optionGroupChildren: null,
+    optionGroupTemplate: null,
+    forceSelection: false,
     autoHighlight: false,
-    className: null,
-    completeMethod: null,
-    delay: 300,
-    disabled: false,
+    virtualScrollerOptions: null,
+    scrollHeight: '200px',
     dropdown: false,
-    dropdownAutoFocus: true,
-    dropdownIcon: 'pi pi-chevron-down',
     dropdownMode: 'blank',
-    dropdownAriaLabel: null,
-    field: null,
-    forceSelection: false,
-    inputClassName: null,
+    dropdownAutoFocus: true,
+    multiple: false,
+    minLength: 1,
+    delay: 300,
+    style: null,
+    className: null,
     inputId: null,
     inputStyle: null,
-    itemTemplate: null,
-    maxLength: null,
-    minLength: 1,
-    multiple: false,
-    name: null,
-    onBlur: null,
-    onChange: null,
-    onClear: null,
-    onClick: null,
-    onContextMenu: null,
-    onDblClick: null,
-    onDropdownClick: null,
-    onFocus: null,
-    onHide: null,
-    onKeyPress: null,
-    onKeyUp: null,
-    onMouseDown: null,
-    onSelect: null,
-    onShow: null,
-    onUnselect: null,
-    optionGroupChildren: null,
-    optionGroupLabel: null,
-    optionGroupTemplate: null,
+    inputClassName: null,
     panelClassName: null,
     panelStyle: null,
     placeholder: null,
     readOnly: false,
-    removeIcon: 'pi pi-times-circle',
-    scrollHeight: '200px',
-    selectedItemTemplate: null,
+    disabled: false,
+    maxLength: null,
     size: null,
-    style: null,
-    suggestions: null,
+    appendTo: null,
+    showEmptyMessage: false,
+    emptyMessage: null,
     tabIndex: null,
+    autoFocus: false,
     tooltip: null,
     tooltipOptions: null,
+    completeMethod: null,
+    itemTemplate: null,
+    selectedItemTemplate: null,
     transitionOptions: null,
-    type: 'text',
-    value: null,
-    virtualScrollerOptions: null
+    dropdownIcon: 'pi pi-chevron-down',
+    removeIcon: 'pi pi-times-circle',
+    'aria-label': null,
+    'aria-labelledby': null,
+    onChange: null,
+    onFocus: null,
+    onBlur: null,
+    onSelect: null,
+    onUnselect: null,
+    onDropdownClick: null,
+    onClick: null,
+    onDblClick: null,
+    onMouseDown: null,
+    onKeyUp: null,
+    onKeyPress: null,
+    onContextMenu: null,
+    onClear: null,
+    onShow: null,
+    onHide: null
 };
diff --git a/components/lib/autocomplete/AutoCompletePanel.js b/components/lib/autocomplete/AutoCompletePanel.js
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import  { localeOption } from '../api/Api';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { Portal } from '../portal/Portal';
 import { Ripple } from '../ripple/Ripple';
@@ -46,7 +47,6 @@ export const AutoCompletePanel = React.memo(
                 );
             } else {
                 const content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
-
                 return (
                     <li key={index} role="option" aria-selected={props.selectedItem === suggestion} className="p-autocomplete-item" style={style} onClick={(e) => props.onItemClick(e, suggestion)}>
                         {content}
@@ -61,6 +61,14 @@ export const AutoCompletePanel = React.memo(
         };
 
         const createContent = () => {
+            if (props.showEmptyMessage && ObjectUtils.isEmpty(props.suggestions)) {
+                const emptyMessage = props.emptyMessage || localeOptions('emptyMessage');
+                return (
+                    <ul className="p-autocomplete-items">
+                        <li className="p-autocomplete-item">{emptyMessage}</li>
+                    </ul>
+                );
+            }
             if (props.virtualScrollerOptions) {
                 const virtualScrollerProps = {
                     ...props.virtualScrollerOptions,
@@ -84,7 +92,6 @@ export const AutoCompletePanel = React.memo(
                 return <VirtualScroller ref={props.virtualScrollerRef} {...virtualScrollerProps} />;
             } else {
                 const items = createItems();
-
                 return (
                     <ul className="p-autocomplete-items" role="listbox" id={props.listId}>
                         {items}

diff --git a/components/lib/autocomplete/autocomplete.d.ts b/components/lib/autocomplete/autocomplete.d.ts
@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { CSSTransitionProps } from '../csstransition';
 import TooltipOptions from '../tooltip/tooltipoptions';
+import { VirtualScrollerProps, VirtualScroller } from '../virtualscroller';
+import { CSSTransitionProps } from '../csstransition';
 import { IconType } from '../utils';
-import { VirtualScroller, VirtualScrollerProps } from '../virtualscroller';
 
 type AutoCompleteOptionGroupTemplateType = React.ReactNode | ((suggestion: any, index: number) => React.ReactNode);
 
@@ -47,64 +47,65 @@ interface AutoCompleteCompleteMethodParams {
 
 export interface AutoCompleteProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, 'onChange' | 'onSelect' | 'ref'> {
     id?: string;
+    inputRef?: React.Ref<HTMLInputElement>;
     value?: any;
-    appendTo?: AutoCompleteAppendToType;
-    autoFocus?: boolean;
+    name?: string;
+    type?: string;
+    suggestions?: any[];
+    field?: string;
+    optionGroupLabel?: string;
+    optionGroupChildren?: string;
+    optionGroupTemplate?: AutoCompleteOptionGroupTemplateType;
+    forceSelection?: boolean;
     autoHighlight?: boolean;
-    className?: string;
-    delay?: number;
-    disabled?: boolean;
+    virtualScrollerOptions?: VirtualScrollerProps;
+    scrollHeight?: string;
     dropdown?: boolean;
-    dropdownAutoFocus?: boolean;
-    dropdownIcon?: IconType<AutoCompleteProps>;
     dropdownMode?: string;
-    dropdownAriaLabel?: string;
-    field?: string;
-    forceSelection?: boolean;
-    inputClassName?: string;
+    dropdownAutoFocus?: boolean;
+    multiple?: boolean;
+    minLength?: number;
+    delay?: number;
+    style?: object;
+    className?: string;
     inputId?: string;
-    inputRef?: React.Ref<HTMLInputElement>;
     inputStyle?: object;
-    itemTemplate?: AutoCompleteItemTemplateType;
-    maxLength?: number;
-    minLength?: number;
-    multiple?: boolean;
-    name?: string;
-    optionGroupChildren?: string;
-    optionGroupLabel?: string;
-    optionGroupTemplate?: AutoCompleteOptionGroupTemplateType;
+    inputClassName?: string;
     panelClassName?: string;
     panelStyle?: object;
     placeholder?: string;
     readOnly?: boolean;
-    removeIcon?: IconType<AutoCompleteProps>;
-    scrollHeight?: string;
-    selectedItemTemplate?: AutoCompleteSelectedItemTemplateType;
+    disabled?: boolean;
+    showEmptyMessage?: boolean;
+    emptyMessage?: string;
+    maxLength?: number;
     size?: number;
-    style?: object;
-    suggestions?: any[];
+    appendTo?: AutoCompleteAppendToType;
     tabIndex?: number;
+    autoFocus?: boolean;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;
-    transitionOptions?: CSSTransitionProps;
-    type?: string;
-    virtualScrollerOptions?: VirtualScrollerProps;
     completeMethod?(e: AutoCompleteCompleteMethodParams): void;
-    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    itemTemplate?: AutoCompleteItemTemplateType;
+    selectedItemTemplate?: AutoCompleteSelectedItemTemplateType;
+    transitionOptions?: CSSTransitionProps;
+    dropdownIcon?: IconType<AutoCompleteProps>;
+    removeIcon?: IconType<AutoCompleteProps>;
     onChange?(e: AutoCompleteChangeParams): void;
-    onClear?(event: React.SyntheticEvent): void;
+    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
+    onBlur?(event: React.FocusEvent<HTMLInputElement>): void;
+    onSelect?(e: AutoCompleteSelectParams): void;
+    onUnselect?(e: AutoCompleteUnselectParams): void;
+    onDropdownClick?(e: AutoCompleteDropdownClickParams): void;
     onClick?(event: React.MouseEvent<HTMLElement>): void;
-    onContextMenu?(event: React.MouseEvent<HTMLElement>): void;
     onDblClick?(event: React.MouseEvent<HTMLElement>): void;
-    onDropdownClick?(e: AutoCompleteDropdownClickParams): void;
-    onFocus?(event: React.FocusEvent<HTMLInputElement>): void;
-    onHide?(): void;
-    onKeyPress?(event: React.KeyboardEvent<HTMLInputElement>): void;
-    onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
     onMouseDown?(event: React.MouseEvent<HTMLElement>): void;
-    onSelect?(e: AutoCompleteSelectParams): void;
+    onKeyUp?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    onKeyPress?(event: React.KeyboardEvent<HTMLInputElement>): void;
+    onContextMenu?(event: React.MouseEvent<HTMLElement>): void;
+    onClear?(event: React.SyntheticEvent): void;
     onShow?(): void;
-    onUnselect?(e: AutoCompleteUnselectParams): void;
+    onHide?(): void;
     children?: React.ReactNode;
 }