fix(autocomplete): endContent prop (#1902)

nextui-org · Nov 6, 2023 · 85a820e · 85a820e · vercel · Nov 6, 2023
1 parent 6a6d426
commit 85a820e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 8 deletions.
diff --git a/.changeset/beige-tips-sort.md b/.changeset/beige-tips-sort.md
@@ -0,0 +1,6 @@
+---
+"@nextui-org/autocomplete": patch
+"@nextui-org/theme": patch
+---
+
+Fix #1893, `endContent` prop fixed.
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
@@ -426,7 +426,8 @@ properties to customize the popover, listbox and input components.
 | scrollShadowProps           | [ScrollShadowProps](/docs/components/scroll-shadow#api)                                                                               | Props to be passed to the ScrollShadow component.                                                                                                             | -                        |
 | selectorButtonProps         | [ButtonProps](/docs/components/button#api)                                                                                            | Props to be passed to the selector button.                                                                                                                    | -                        |
 | clearButtonProps            | [ButtonProps](/docs/components/button#api)                                                                                            | Props to be passed to the clear button.                                                                                                                       | -                        |
-| disableClearable            | `boolean`                                                                                                                             | Whether the clear button should be hidden.                                                                                                                    | `false`                  |
+| isClearable                 | `boolean`                                                                                                                             | Whether the clear button should be shown.                                                                                                                     | `true`                   |
+| disableClearable            | `boolean`                                                                                                                             | Whether the clear button should be hidden. (**Deprecated**) Use `isClearable` instead.                                                                        | `false`                  |
 | disableAnimation            | `boolean`                                                                                                                             | Whether the Autocomplete should be animated.                                                                                                                  | `true`                   |
 | disableSelectorIconRotation | `boolean`                                                                                                                             | Whether the select should disable the rotation of the selector icon.                                                                                          | `false`                  |
 | classNames                  | `Record<"base"｜ "listboxWrapper"｜ "listbox"｜ "popoverContent" ｜ "endContentWrapper"｜ "clearButton" ｜ "selectorButton", string>` | Allows to set custom class names for the Autocomplete slots.                                                                                                  | -                        |

diff --git a/packages/components/autocomplete/src/autocomplete.tsx b/packages/components/autocomplete/src/autocomplete.tsx
@@ -20,6 +20,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
     disableAnimation,
     selectorIcon = <ChevronDownIcon />,
     clearIcon = <CloseIcon />,
+    endContent,
     getBaseProps,
     getSelectorButtonProps,
     getInputProps,
@@ -44,7 +45,7 @@ function Autocomplete<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLI
         {...getInputProps()}
         endContent={
           <div {...getEndContentWrapperProps()}>
-            <Button {...getClearButtonProps()}>{clearIcon}</Button>
+            {endContent || <Button {...getClearButtonProps()}>{clearIcon}</Button>}
             <Button {...getSelectorButtonProps()}>{selectorIcon}</Button>
           </div>
         }

diff --git a/packages/components/autocomplete/src/use-autocomplete.ts b/packages/components/autocomplete/src/use-autocomplete.ts
@@ -64,6 +64,12 @@ interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>
    * @default { disableAnimation: false }
    */
   inputProps?: Partial<InputProps>;
+  /**
+   * Whether the clear button should be hidden.
+   * @default false
+   * @deprecated Use `isClearable` instead.
+   */
+  disableClearable?: boolean;
   /**
    * Props to be passed to the selector button component.
    * @default { size: "sm", variant: "light", radius: "full", isIconOnly: true }
@@ -104,7 +110,7 @@ interface Props<T> extends Omit<HTMLNextUIProps<"input">, keyof ComboBoxProps<T>
 }
 
 export type UseAutocompleteProps<T> = Props<T> &
-  Omit<InputProps, "children" | "value" | "defaultValue" | "classNames"> &
+  Omit<InputProps, "children" | "value" | "isClearable" | "defaultValue" | "classNames"> &
   ComboBoxProps<T> &
   AsyncLoadable &
   AutocompleteVariantProps;
@@ -113,6 +119,12 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
   const [props, variantProps] = mapPropsVariants(originalProps, autocomplete.variantKeys);
   const disableAnimation = originalProps.disableAnimation ?? false;
 
+  // TODO: Remove disableClearable prop in the next minor release.
+  const isClearable =
+    originalProps.disableClearable !== undefined
+      ? !originalProps.disableClearable
+      : originalProps.isClearable;
+
   const {
     ref,
     as,
@@ -127,6 +139,7 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     clearIcon,
     scrollRef: scrollRefProp,
     defaultFilter,
+    endContent,
     allowsEmptyCollection = true,
     shouldCloseOnBlur = true,
     popoverProps = {},
@@ -286,10 +299,11 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     () =>
       autocomplete({
         ...variantProps,
+        isClearable,
         disableAnimation,
         className,
       }),
-    [...Object.values(variantProps), disableAnimation, className],
+    [...Object.values(variantProps), isClearable, disableAnimation, className],
   );
 
   const onClear = useCallback(() => {
@@ -413,6 +427,8 @@ export function useAutocomplete<T extends object>(originalProps: UseAutocomplete
     isLoading,
     clearIcon,
     isOpen,
+    endContent,
+    isClearable,
     disableAnimation,
     allowsCustomValue,
     selectorIcon,

diff --git a/packages/components/autocomplete/stories/autocomplete.stories.tsx b/packages/components/autocomplete/stories/autocomplete.stories.tsx
@@ -277,6 +277,20 @@ const StartContentTemplate = ({color, variant, ...args}: AutocompleteProps) => (
   </Autocomplete>
 );
 
+const EndContentTemplate = ({color, variant, ...args}: AutocompleteProps) => (
+  <Autocomplete
+    className="max-w-xs"
+    color={color}
+    defaultSelectedKey={"cat"}
+    endContent={<PetBoldIcon className="text-xl" />}
+    label="Favorite Animal"
+    variant={variant}
+    {...args}
+  >
+    {items}
+  </Autocomplete>
+);
+
 const DynamicTemplateWithDescriptions = ({color, variant, ...args}: AutocompleteProps<Animal>) => (
   <Autocomplete
     className="max-w-xs"
@@ -693,6 +707,14 @@ export const StartContent = {
   },
 };
 
+export const EndContent = {
+  render: EndContentTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
 export const WithoutScrollShadow = {
   render: Template,
 

diff --git a/packages/core/theme/src/components/autocomplete.ts b/packages/core/theme/src/components/autocomplete.ts
@@ -24,11 +24,11 @@ const autocomplete = tv({
     selectorButton: "text-medium",
   },
   variants: {
-    disableClearable: {
-      true: {
+    isClearable: {
+      true: {},
+      false: {
         clearButton: "hidden",
       },
-      false: {},
     },
     disableAnimation: {
       true: {
@@ -47,7 +47,7 @@ const autocomplete = tv({
   },
   defaultVariants: {
     disableAnimation: false,
-    disableClearable: false,
+    isClearable: true,
     disableSelectorIconRotation: false,
   },
 });