Merge pull request #114 from osstotalsoft/autocomplete-state-aware-no…

…OptionsText Made noOptionsText state aware
osstotalsoft · Jun 25, 2024 · ae03e62 · ae03e62
2 parents c0b2eeb + 7c724be
commit ae03e62
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/inputs/Autocomplete/Autocomplete.tsx b/src/components/inputs/Autocomplete/Autocomplete.tsx
@@ -309,6 +309,11 @@ const Autocomplete: React.FC<AutocompleteProps<any, any, any, any>> = ({
     setOptions(receivedOptions || [])
   }, [receivedOptions])
 
+  const localNoOptionsText = useMemo(() => {
+    if (!noOptionsText || typeof noOptionsText !== 'function') return noOptionsText as React.ReactNode
+    return noOptionsText(localInput, localLoading)
+  }, [noOptionsText, localInput, localLoading])
+
   const listBoxProps = useMemo(
     () =>
       isPaginated
@@ -331,7 +336,7 @@ const Autocomplete: React.FC<AutocompleteProps<any, any, any, any>> = ({
 
   return (
     <MuiAutocomplete
-      noOptionsText={<NoOptionsText color={typographyContentColor}>{noOptionsText}</NoOptionsText>}
+      noOptionsText={<NoOptionsText color={typographyContentColor}>{localNoOptionsText}</NoOptionsText>}
       typographyContentColor={typographyContentColor}
       forcePopupIcon
       label={label}

diff --git a/src/components/inputs/Autocomplete/types.ts b/src/components/inputs/Autocomplete/types.ts
@@ -53,6 +53,7 @@ export interface AutocompleteProps<
     | 'multiple'
     | 'disableClearable'
     | 'renderTags'
+    | 'noOptionsText'
   > {
   /**
    * Array of options.
@@ -139,7 +140,7 @@ export interface AutocompleteProps<
    * Text to display when there are no options.
    * For localization purposes, you can use the provided translations.
    */
-  noOptionsText?: React.ReactNode
+  noOptionsText?: React.ReactNode | ((inputValue: string, loadingOptions: boolean) => React.ReactNode)
   /**
    * The color of selected input.
    */