fix(theme): support description with a single space using zero-width …

…space
nextui-org · Dec 3, 2024 · 917fbb1 · 917fbb1
1 parent e8bfdc8
commit 917fbb1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/packages/components/input/src/input.tsx b/packages/components/input/src/input.tsx
@@ -53,7 +53,9 @@ const Input = forwardRef<"input", InputProps>((props, ref) => {
         {shouldShowError ? (
           <div {...getErrorMessageProps()}>{errorMessage}</div>
         ) : (
-          <div {...getDescriptionProps()}>{description}</div>
+          <div {...getDescriptionProps()}>
+            {description === " " ? <span>&#8203;</span> : description}
+          </div>
         )}
       </div>
     );

diff --git a/packages/components/input/stories/input.stories.tsx b/packages/components/input/stories/input.stories.tsx
@@ -91,6 +91,14 @@ const MirrorTemplate = (args) => (
   </div>
 );
 
+const WithDescriptionTemplate = (args) => (
+  <div className="w-full max-w-4xl flex flex-row items-end gap-4">
+    <Input {...args} />
+    <Input {...args} placeholder="Enter your email" />
+    <Input {...args} description=" " placeholder="Enter your email" />
+  </div>
+);
+
 const FormTemplate = (args) => (
   <form
     className="w-full max-w-xl flex flex-row items-end gap-4"
@@ -590,7 +598,7 @@ export const WithoutLabel = {
 };
 
 export const WithDescription = {
-  render: MirrorTemplate,
+  render: WithDescriptionTemplate,
 
   args: {
     ...defaultProps,