From 9e8beababea60dc499cc0989a0720fe25a10a823 Mon Sep 17 00:00:00 2001
From: Tianen Pang <32772271+tianenpang@users.noreply.github.com>
Date: Thu, 21 Nov 2024 04:33:00 +0800
Subject: [PATCH] fix: label placement when the select has a placeholder or
 description (#4126)

---
 .changeset/tough-brooms-hunt.md               |  5 +++
 .../select/__tests__/select.test.tsx          |  3 +-
 packages/components/select/src/use-select.ts  |  3 +-
 .../select/stories/select.stories.tsx         | 37 +++++++++++++++++++
 4 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tough-brooms-hunt.md

diff --git a/.changeset/tough-brooms-hunt.md b/.changeset/tough-brooms-hunt.md
new file mode 100644
index 0000000000..3fc6077312
--- /dev/null
+++ b/.changeset/tough-brooms-hunt.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+Fix the label placement when the `Select` has a `placeholder` or `description`.
diff --git a/packages/components/select/__tests__/select.test.tsx b/packages/components/select/__tests__/select.test.tsx
index 6776344eeb..655b06ce81 100644
--- a/packages/components/select/__tests__/select.test.tsx
+++ b/packages/components/select/__tests__/select.test.tsx
@@ -723,11 +723,12 @@ describe("Select", () => {
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it("should place the label outside when labelPlacement is outside", () => {
+  it("should place the label outside when labelPlacement is outside and isMultiline enabled", () => {
     const labelContent = "Favorite Animal Label";
 
     render(
       <Select
+        isMultiline
         aria-label="Favorite Animal"
         data-testid="select"
         label={labelContent}
diff --git a/packages/components/select/src/use-select.ts b/packages/components/select/src/use-select.ts
index 0c8d31733b..7da2bd7e9b 100644
--- a/packages/components/select/src/use-select.ts
+++ b/packages/components/select/src/use-select.ts
@@ -314,7 +314,8 @@ export function useSelect<T extends object>(originalProps: UseSelectProps<T>) {
   const hasPlaceholder = !!placeholder;
   const shouldLabelBeOutside =
     labelPlacement === "outside-left" ||
-    (labelPlacement === "outside" && (hasPlaceholder || !!originalProps.isMultiline));
+    (labelPlacement === "outside" &&
+      (!(hasPlaceholder || !!description) || !!originalProps.isMultiline));
   const shouldLabelBeInside = labelPlacement === "inside";
   const isOutsideLeft = labelPlacement === "outside-left";
 
diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 0a58ad10a3..a5dcaf3022 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/packages/components/select/stories/select.stories.tsx
@@ -357,6 +357,43 @@ const LabelPlacementTemplate = ({color, variant, ...args}: SelectProps) => (
         </Select>
       </div>
     </div>
+    <div className="w-full max-w-2xl flex flex-col gap-3">
+      <h3>With placeholder and description</h3>
+      <div className="w-full flex flex-row items-end gap-4">
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+        >
+          {items}
+        </Select>
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+          labelPlacement="outside"
+        >
+          {items}
+        </Select>
+        <Select
+          color={color}
+          description="Select your favorite animal"
+          label="Favorite Animal"
+          placeholder="Select an animal"
+          variant={variant}
+          {...args}
+          labelPlacement="outside-left"
+        >
+          {items}
+        </Select>
+      </div>
+    </div>
   </div>
 );