Fix long option not truncated issue in dropdown

[ayush1298]

fixes #19427

The Issue:
Dropdown overlays for p-select and p-multiselect only had a min-width set (to match the input box) but no max-width. When options contained long text, the overlay expanded beyond the input box width instead of staying aligned and truncating the content.

The Fix:
Overlay constraint: Added an autoMaxWidth property to OverlayOptions and updated the Overlay layout alignment logic to apply maxWidth matching the target's width when enabled.
Component config: Exposed autoWidth (default true) on Select and MultiSelect components, which forwards autoMaxWidth: !autoWidth to the underlying overlay.
Ellipsis styles: Added default CSS truncation styles (text-overflow: ellipsis, overflow: hidden, white-space: nowrap) to option/label classes in both components to handle constrained widths cleanly.

Video with fix is here:

[Copilot]

Pull request overview

This PR aims to prevent p-select and p-multiselect overlays from expanding beyond the trigger width when option text is very long, by introducing an overlay max-width constraint and adding truncation styles.

Changes:

• Added autoMaxWidth to OverlayOptions and applied max-width during overlay alignment when enabled.
• Exposed a new autoWidth input on Select and MultiSelect that forwards configuration to the overlay.
• Added default truncation (ellipsis) styles to Select/MultiSelect label/option-related CSS.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/primeng/src/select/style/selectstyle.ts	Adds truncation styles for Select label/option text.
packages/primeng/src/select/select.ts	Forwards new overlay sizing option and introduces autoWidth input.
packages/primeng/src/overlay/overlay.ts	Applies maxWidth constraint based on the target width when enabled.
packages/primeng/src/multiselect/style/multiselectstyle.ts	Adds truncation styles; modifies invalid placeholder selector coverage.
packages/primeng/src/multiselect/multiselect.ts	Forwards new overlay sizing option and introduces autoWidth input.
packages/primeng/src/api/overlayoptions.ts	Adds new autoMaxWidth option to the overlay options interface.

Comments suppressed due to low confidence (2)

packages/primeng/src/select/select.ts:687

• The new autoWidth input introduces new overlay sizing behavior, but there are no unit tests covering it (e.g. verifying whether the overlay element gets/doesn't get a max-width matching the target when autoWidth is toggled). Since this component has an existing spec suite, adding a focused test would help prevent regressions.

    @Input({ transform: booleanAttribute }) autofocusFilter: boolean = true;
    /**
     * Whether the width of the overlay mirrors the width of the component.
     * @group Props
     */
    @Input({ transform: booleanAttribute }) autoWidth: boolean = true;

packages/primeng/src/multiselect/multiselect.ts:747

• The new autoWidth input introduces new overlay sizing behavior, but there are no unit tests covering it (e.g. verifying whether the overlay element gets/doesn't get a max-width matching the target when autoWidth is toggled). Since this component has an existing spec suite, adding a focused test would help prevent regressions.

    @Input({ transform: booleanAttribute }) autofocusFilter: boolean = false;
    /**
     * Whether the width of the overlay mirrors the width of the component.
     * @group Props
     */
    @Input({ transform: booleanAttribute }) autoWidth: boolean = true;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.