fix(select): label placement discrepancy in Select

.changeset/dull-bags-divide.md

@@ -0,0 +1,5 @@
+---
+"@nextui-org/select": patch
+---
+
+The PR makes changes to use the label placement in select according to the shouldLabelBeOutside rather than isOutsideLeft. This resolves the label placement issues in case of multiline.(fixes issue: #3841)

packages/components/select/__tests__/select.test.tsx

@@ -720,6 +720,63 @@ describe("Select", () => {
       expect(onChange).toBeCalledTimes(1);
     });
   });
+
+  it("should place the label outside when labelPlacement is outside", async () => {
+    const labelContent = "Favorite Animal Label";
+
+    render(
+      <Select
+        aria-label="Favorite Animal"
+        data-testid="select"
+        label={labelContent}
+        labelPlacement="outside"
+        placeholder="placeholder"
+      >
+        <SelectItem key="penguin" value="penguin">
+          Penguin
+        </SelectItem>
+        <SelectItem key="zebra" value="zebra">
+          Zebra
+        </SelectItem>
+        <SelectItem key="shark" value="shark">
+          Shark
+        </SelectItem>
+      </Select>,
+    );
+
+    const base = document.querySelector("[data-slot=base]");
+    const trigger = document.querySelector("[data-slot=trigger]");
+
+    expect(base).toHaveTextContent(labelContent);
+    expect(trigger).not.toHaveTextContent(labelContent);
+  });
+
+  it("should place the label inside when labelPlacement prop is not passed", async () => {
+    const labelContent = "Favorite Animal Label";
+
+    render(
+      <Select
+        aria-label="Favorite Animal"
+        data-testid="select"
+        label={labelContent}
+        placeholder="placeholder"
+      >
+        <SelectItem key="penguin" value="penguin">
+          Penguin
+        </SelectItem>
+        <SelectItem key="zebra" value="zebra">
+          Zebra
+        </SelectItem>
+        <SelectItem key="shark" value="shark">
+          Shark
+        </SelectItem>
+      </Select>,
+    );
+
+    const trigger = document.querySelector("[data-slot=trigger]");
+
+    expect(trigger).toHaveTextContent(labelContent);
+  });
 });
 
 describe("Select with React Hook Form", () => {

packages/components/select/src/select.tsx

@@ -29,7 +29,7 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
     endContent,
     placeholder,
     renderValue,
-    isOutsideLeft,
+    shouldLabelBeOutside,
     disableAnimation,
     getBaseProps,
     getLabelProps,
@@ -117,10 +117,10 @@ function Select<T extends object>(props: Props<T>, ref: ForwardedRef<HTMLSelectE
   return (
     <div {...getBaseProps()}>
       <HiddenSelect {...getHiddenSelectProps()} />
-      {isOutsideLeft ? labelContent : null}
+      {shouldLabelBeOutside ? labelContent : null}
       <div {...getMainWrapperProps()}>
         <Component {...getTriggerProps()}>
-          {!isOutsideLeft ? labelContent : null}
+          {!shouldLabelBeOutside ? labelContent : null}
           <div {...getInnerWrapperProps()}>
             {startContent}
             <span {...getValueProps()}>{renderSelectedItem}</span>