Merge pull request #293 from WestpacGEL/151-autocomplete-no-options-d…

…isplay-and-icon-rendering

fixes #151 autocomplete no option option

packages/ui/src/components/autocomplete/autocomplete.component.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { useMemo } from 'react';
 import { useButton, useComboBox, useFilter, useSearchField } from 'react-aria';
 import { Item, useComboBoxState, useSearchFieldState } from 'react-stately';
 
@@ -11,6 +12,22 @@ import { styles as autocompleteStyles } from './autocomplete.styles.js';
 import { type AutocompleteProps } from './autocomplete.types.js';
 import { ListBox, Popover } from './components/index.js';
 
+const STATIC_IS_OPEN_STATE = {
+  isOpen: true,
+  setOpen: () => {
+    return;
+  },
+  open: () => {
+    return;
+  },
+  close: () => {
+    return;
+  },
+  toggle: () => {
+    return;
+  },
+};
+
 export function Autocomplete<T extends object>({
   size = 'medium',
   invalid = false,
@@ -19,6 +36,7 @@ export function Autocomplete<T extends object>({
   portalContainer,
   errorMessage,
   hintMessage,
+  noOptionsMessage,
   ...props
 }: AutocompleteProps<T>) {
   const { contains } = useFilter({ sensitivity: 'base' });
@@ -60,6 +78,14 @@ export function Autocomplete<T extends object>({
   const { buttonProps } = useButton(clearButtonProps, clearButtonRef);
   const outerRef = React.useRef(null);
 
+  const isNoOptionPopOverOpen = useMemo(() => {
+    return (
+      noOptionsMessage &&
+      ((!state.isOpen && state.isFocused && searchProps.value.length > 0 && !state.selectedItem) ||
+        (state.collection.size === 0 && searchProps.value.length > 0))
+    );
+  }, [state, searchProps, noOptionsMessage]);
+
   return (
     <div className={styles.base()}>
       <FormLabel {...labelProps}>{props.label}</FormLabel>
@@ -78,7 +104,17 @@ export function Autocomplete<T extends object>({
           <ClearIcon aria-hidden="true" color="muted" size="small" />
         </button>
       </div>
-
+      {isNoOptionPopOverOpen && (
+        <Popover
+          state={STATIC_IS_OPEN_STATE}
+          isNonModal
+          placement="bottom start"
+          portalContainer={portalContainer}
+          triggerRef={outerRef}
+        >
+          <div className="px-3 py-2">{noOptionsMessage}</div>
+        </Popover>
+      )}
       {state.isOpen && (
         <Popover
           popoverRef={popoverRef}

packages/ui/src/components/autocomplete/autocomplete.stories.tsx

@@ -175,6 +175,7 @@ export const ErrorMessageAndLabel: Story = {
     errorMessage: 'This is an inline error message',
     validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
+    noOptionsMessage: 'No options',
     children: [
       <Autocomplete.Item key="Option 1">Option 1</Autocomplete.Item>,
       <Autocomplete.Item key="Option 2">Option 2</Autocomplete.Item>,

packages/ui/src/components/autocomplete/autocomplete.types.ts

@@ -31,6 +31,10 @@ export type AutocompleteProps<T extends object> = {
    * Whether autocomplete is disabled
    */
   isDisabled?: Variants['isDisabled'];
+  /**
+   * No option message
+   */
+  noOptionsMessage?: ReactNode;
   /**
    * Element where the popover will be rendered, by default it will be into the body
    */