[BUG] - Label placement - "outside" conflicts with Multiline property in Select element

[Doomce]

NextUI Version

2.4.8

Describe the bug

Label position in Select element depends on properties: labelPlacement="outside" and isMultiline={true}. With isMultiline={true}, the label is displayed inside select border.

Code:

<Select
    labelPlacement={"outside"}
    label="User Properties"
    placeholder="Select properties"
    className="w-full"
    variant="bordered"
    selectedKeys={selection}
    items={properties}
    isMultiline={true}
>
    {properties.map((prop) => (
        <SelectItem key={prop} value={prop}>
            {prop}
        </SelectItem>
    ))}
</Select>

Visualization:

Other way - without multiline Code:

<Select
    labelPlacement={"outside"}
    label="User Properties"
    placeholder="Select properties"
    className="w-full"
    variant="bordered"
    selectedKeys={selection}
    items={properties}
    isMultiline={false}
>
    {properties.map((prop) => (
        <SelectItem key={prop} value={prop}>
            {prop}
        </SelectItem>
    ))}
</Select>

Also, This issue can be found in NextUI documentation:

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Import Select, SelectItem components.
2. Create Select element
3. Set labelPlacement="outside" property to the item.
4. Set isMultiline={true} property to the item.

Expected behavior

Label placement should not depend by isMultiline value (the label should be outside)

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

[linear[bot]]

ENG-1427 [BUG] - Label placement - "outside" conflicts with Multiline property in Select element