fix(input): support both endContent and isClearable at the same time

.changeset/eight-moose-dance.md

@@ -0,0 +1,6 @@
+---
+"@nextui-org/input": patch
+"@nextui-org/theme": patch
+---
+
+I have made a change so that when both endContent and isClearable are specified, endContent no longer replaces the Clear button. Now, both endContent and the Clear button will be displayed.

packages/components/input/src/input.tsx

@@ -1,11 +1,15 @@
 import {CloseFilledIcon} from "@nextui-org/shared-icons";
-import {useMemo} from "react";
+import {useMemo, useEffect, useState, useRef, CSSProperties} from "react";
 import {forwardRef} from "@nextui-org/system";
 
 import {UseInputProps, useInput} from "./use-input";
 
 export interface InputProps extends Omit<UseInputProps, "isMultiline"> {}
 
+export interface ClearButtonCSSProperties {
+  "--end-content-width": string;
+}
+
 const Input = forwardRef<"input", InputProps>((props, ref) => {
   const {
     Component,
@@ -32,15 +36,40 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     getClearButtonProps,
   } = useInput({...props, ref});
 
-  const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;
+  const [endContentWidth, setEndContentWidth] = useState<number>(0);
+  const endContentWrapperRef = useRef<HTMLDivElement>(null);
 
-  const end = useMemo(() => {
-    if (isClearable) {
-      return <button {...getClearButtonProps()}>{endContent || <CloseFilledIcon />}</button>;
+  useEffect(() => {
+    if (endContentWrapperRef.current) {
+      setEndContentWidth(endContentWrapperRef.current.getBoundingClientRect().width);
     }
+  }, [endContent]);
 
-    return endContent;
-  }, [isClearable, getClearButtonProps]);
+  const end = useMemo(() => {
+    return (
+      <>
+        {isClearable && (
+          <button
+            {...getClearButtonProps(
+              endContent
+                ? {
+                    style: {
+                      "--end-content-width": `${endContentWidth}px`,
+                    } as CSSProperties & ClearButtonCSSProperties,
+                    "data-is-end-content": true,
+                  }
+                : {
+                    "data-is-end-content": false,
+                  },
+            )}
+          >
+            {<CloseFilledIcon />}
+          </button>
+        )}
+        {endContent && <div ref={endContentWrapperRef}>{endContent}</div>}
+      </>
+    );
+  }, [isClearable, endContent, getClearButtonProps]);
 
   const helperWrapper = useMemo(() => {
     const shouldShowError = isInvalid && errorMessage;
@@ -68,6 +97,29 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
   ]);
 
   const innerWrapper = useMemo(() => {
+    if (startContent || end) {
+      return (
+        <div {...getInnerWrapperProps()}>
+          {startContent}
+          <input
+            {...getInputProps(
+              endContent && isClearable
+                ? {
+                    style: {
+                      "--end-content-width": `${endContentWidth}px`,
+                    } as CSSProperties & ClearButtonCSSProperties,
+                    "data-is-end-content": true,
+                  }
+                : {
+                    "data-is-end-content": false,
+                  },
+            )}
+          />
+          {end}
+        </div>
+      );
+    }
+
     return (
       <div {...getInnerWrapperProps()}>
         {startContent}
@@ -77,6 +129,8 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
     );
   }, [startContent, end, getInputProps, getInnerWrapperProps]);
 
+  const labelContent = label ? <label {...getLabelProps()}>{label}</label> : null;
+
   const mainWrapper = useMemo(() => {
     if (shouldLabelBeOutside) {
       return (

packages/components/input/stories/input.stories.tsx

@@ -606,6 +606,37 @@ export const Clearable = {
   },
 };
 
+export const ClearableAndEndContent = {
+  render: Template,
+  args: {
+    ...defaultProps,
+    variant: "bordered",
+    placeholder: "Search for something",
+    defaultValue: "",
+    // eslint-disable-next-line no-console
+    onClear: () => console.log("input cleared"),
+    clearable: true,
+    label: "Search",
+    labelPlacement: "outside",
+    startContent: (
+      <SearchIcon className="text-black/50 mb-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0" />
+    ),
+    endContent: (
+      <>
+        <svg
+          className="w-5 h-5 text-2xl text-default-400 pointer-events-none flex-shrink-0"
+          fill="currentColor"
+          viewBox="0 0 20 20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M7 4a3 3 0 0 1 6 0v6a3 3 0 1 1-6 0V4Z" />
+          <path d="M5.5 9.643a.75.75 0 0 0-1.5 0V10c0 3.06 2.29 5.585 5.25 5.954V17.5h-1.5a.75.75 0 0 0 0 1.5h4.5a.75.75 0 0 0 0-1.5h-1.5v-1.546A6.001 6.001 0 0 0 16 10v-.357a.75.75 0 0 0-1.5 0V10a4.5 4.5 0 0 1-9 0v-.357Z" />
+        </svg>
+      </>
+    ),
+  },
+};
+
 export const StartContent = {
   render: StartContentTemplate,
 

packages/core/theme/src/components/input.ts

@@ -53,7 +53,6 @@ const input = tv({
       "z-10",
       "hidden",
       "absolute",
-      "end-3",
       "start-auto",
       "appearance-none",
       "outline-none",
@@ -190,8 +189,10 @@ const input = tv({
     },
     isClearable: {
       true: {
-        input: "peer pe-6 input-search-cancel-button-none",
-        clearButton: "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block",
+        input:
+          "peer pe-6 input-search-cancel-button-none data-[filled=true]:data-[is-end-content=true]:pr-[calc(var(--end-content-width)+theme(spacing.4))] data-[filled=true]:data-[is-end-content=true]:rtl:pl-[calc(var(--end-content-width)+theme(spacing.4))] rtl:!pr-auto",
+        clearButton:
+          "peer-data-[filled=true]:opacity-70 peer-data-[filled=true]:block data-[is-end-content=false]:right-3 data-[is-end-content=false]:rtl:left-3 data-[is-end-content=true]:right-[calc(var(--end-content-width)+theme(spacing.5))] data-[is-end-content=true]:rtl:left-[calc(var(--end-content-width)+theme(spacing.5))] rtl:!right-auto",
       },
     },
     isDisabled: {