refactor(select): switch default to AutoPositionStrategy; export IgxSelectOverlapPositionStrategy as opt-in (#17344)

Copilot · kdinev · damyanpetev · web-flow · commit 2d06fafb7d4f · 2026-06-24T14:13:47.000+03:00
* feat(select): default to AutoPositionStrategy; add IgxSelectOverlapPositionStrategy opt-in

* refactor(select): move changelog entry to General; add migration note for default strategy change

* fix(select): insert HTML comment above igx-select in migration instead of logger.warn

* refactor(select): address PR review feedback (AutoPositionStrategy defaults, changelog order, migration note, package-lock)

* fix(select): use combo's target assign and move to the correct hook

---------

Co-authored-by: copilot-swe-agent[bot] &lt;198982749+Copilot@users.noreply.github.com&gt;
Co-authored-by: Konstantin Dinev &lt;kdinev@infragistics.com&gt;
Co-authored-by: Damyan Petev &lt;damyanpetev@users.noreply.github.com&gt;
Co-authored-by: Copilot Autofix powered by AI &lt;175728472+Copilot@users.noreply.github.com&gt;
Co-authored-by: Stamen Stoychev &lt;chronos.stz@gmail.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -65,6 +65,17 @@ All notable changes for each version of this project will be documented in this
 
     - Added a dedicated `excel-filtering-theme()` for styling the `Excel Style Filtering`. Use it instead of the excel-filtering color properties from `grid-theme()`.
 
+### General
+
+- `IgxSelectComponent`
+    - The default positioning strategy has changed from the internal overlap strategy to `AutoPositionStrategy`. The dropdown now opens below (or above, if there is not enough space) the input element, consistent with other connected components.
+    - Added `IgxSelectOverlapPositionStrategy` - a new publicly exported strategy that preserves the previous behavior of aligning the selected item's text over the input text. To opt into the previous overlap behavior:
+        ```ts
+        this.select.overlaySettings = {
+            positionStrategy: new IgxSelectOverlapPositionStrategy(this.select)
+        };
+        ```
+
 ## 21.2.0
 
 ### New Features
diff --git a/projects/igniteui-angular/migrations/update-22_0_0/index.spec.ts b/projects/igniteui-angular/migrations/update-22_0_0/index.spec.ts
@@ -5,6 +5,10 @@ import { setupTestTree } from '../common/setup.spec';
 
 const version = '22.0.0';
 
+const SELECT_POSITION_NOTE =
+    `<!-- IgxSelect: default positioning changed to AutoPositionStrategy (below/above input).\n` +
+    `     To preserve overlap behavior: this.select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(this.select) }; -->\n`;
+
 describe(`Update to ${version}`, () => {
     let appTree: UnitTestTree;
     const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
@@ -27,7 +31,7 @@ describe(`Update to ${version}`, () => {
             .toEqual(`<igx-input-group type="line"><input igxInput></igx-input-group>`);
     });
 
-    it('should add type="line" to igx-select without explicit type', async () => {
+    it('should add type="line" and a positioning note to igx-select without explicit type', async () => {
         appTree.create(
             `/testSrc/appPrefix/component/test.component.html`,
             `<igx-select><igx-select-item>Option</igx-select-item></igx-select>`
@@ -36,7 +40,19 @@ describe(`Update to ${version}`, () => {
         const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
 
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
-            .toEqual(`<igx-select type="line"><igx-select-item>Option</igx-select-item></igx-select>`);
+            .toEqual(`${SELECT_POSITION_NOTE}<igx-select type="line"><igx-select-item>Option</igx-select-item></igx-select>`);
+    });
+
+    it('should add a positioning note to igx-select that already has an explicit type', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/test.component.html`,
+            `<igx-select type="border"><igx-select-item>Option</igx-select-item></igx-select>`
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
+            .toEqual(`${SELECT_POSITION_NOTE}<igx-select type="border"><igx-select-item>Option</igx-select-item></igx-select>`);
     });
 
     it('should add type="line" to igx-date-picker without explicit type', async () => {
@@ -111,7 +127,7 @@ describe(`Update to ${version}`, () => {
 
         expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
             .toEqual(`<igx-input-group type="line"><input igxInput></igx-input-group>
-<igx-select type="line"></igx-select>
+${SELECT_POSITION_NOTE}<igx-select type="line"></igx-select>
 <igx-input-group type="border"><input igxInput></igx-input-group>`);
     });
 });
diff --git a/projects/igniteui-angular/migrations/update-22_0_0/index.ts b/projects/igniteui-angular/migrations/update-22_0_0/index.ts
@@ -71,6 +71,31 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
         }
     }
 
+    applyChanges();
+    changes.clear();
+
+    // IgxSelect: default positioning strategy changed to AutoPositionStrategy.
+    // Insert a comment above each <igx-select> to inform the developer.
+    const SELECT_NOTE =
+        `<!-- IgxSelect: default positioning changed to AutoPositionStrategy (below/above input).\n` +
+        `     To preserve overlap behavior: this.select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(this.select) }; -->\n`;
+
+    for (const path of update.templateFiles) {
+        const content = host.read(path)!.toString();
+        const root = parseFile(parser, host, path);
+        const nodes = findElementNodes(root, 'igx-select');
+
+        for (const node of nodes) {
+            if (!(node instanceof Element)) continue;
+
+            const { startTag, file } = getSourceOffset(node);
+            const noteStart = Math.max(0, startTag.start - SELECT_NOTE.length);
+            if (content.slice(noteStart, startTag.start) === SELECT_NOTE) continue;
+
+            addChange(file.url, new FileChange(startTag.start, SELECT_NOTE));
+        }
+    }
+
     applyChanges();
     update.applyChanges();
 };
diff --git a/projects/igniteui-angular/select/src/select/public_api.ts b/projects/igniteui-angular/select/src/select/public_api.ts
@@ -6,6 +6,7 @@ import { IgxSelectComponent, IgxSelectFooterDirective, IgxSelectHeaderDirective,
 export * from './select-group.component';
 export * from './select-item.component';
 export * from './select.component';
+export * from './select-overlap-positioning-strategy';
 
 /* NOTE: Select directives collection for ease-of-use import in standalone components scenario */
 export const IGX_SELECT_DIRECTIVES = [
diff --git a/projects/igniteui-angular/select/src/select/select-overlap-positioning-strategy.ts b/projects/igniteui-angular/select/src/select/select-overlap-positioning-strategy.ts
@@ -1,13 +1,14 @@
 import { VerticalAlignment, HorizontalAlignment, PositionSettings, ConnectedFit, Point, Size, BaseFitPositionStrategy, Util  } from 'igniteui-angular/core';
 import { IPositionStrategy } from 'igniteui-angular/core';
 
-import { IgxSelectBase } from './select.common';
-import { PlatformUtil } from 'igniteui-angular/core';
-import { Optional } from '@angular/core';
+import type { IgxSelectComponent } from './select.component';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 
-/** @hidden @internal */
-export class SelectPositioningStrategy extends BaseFitPositionStrategy implements IPositionStrategy {
+/**
+ * Positions the select dropdown so that the active item's text overlaps
+ * the value displayed in the select input box.
+ */
+export class IgxSelectOverlapPositionStrategy extends BaseFitPositionStrategy implements IPositionStrategy {
     private _selectDefaultSettings = {
         horizontalDirection: HorizontalAlignment.Right,
         verticalDirection: VerticalAlignment.Bottom,
@@ -22,7 +23,10 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
     private global_xOffset = 0;
     private global_styles: SelectStyles = {};
 
-    constructor(public select: IgxSelectBase, settings?: PositionSettings, @Optional() protected platform?: PlatformUtil) {
+    /** @hidden @internal */
+    public isItemOverlapPositioning = true;
+
+    constructor(private select: IgxSelectComponent, settings?: PositionSettings) {
         super();
         this.settings = Object.assign({}, this._selectDefaultSettings, settings);
     }
@@ -87,7 +91,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
     /**
      * Obtain the selected item if there is such one or otherwise use the first one
      */
-    public getInteractionItemElement(): HTMLElement {
+    private getInteractionItemElement(): HTMLElement {
         let itemElement;
         if (this.select.selectedItem) {
             itemElement = this.select.selectedItem.element.nativeElement;
@@ -103,7 +107,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
      *
      * @param selectFit selectFit to use for computation.
      */
-    protected fitInViewport(_contentElement: HTMLElement, selectFit: SelectFit) {
+    protected override fitInViewport(_contentElement: HTMLElement, selectFit: SelectFit) {
         const footer = selectFit.scrollContainerRect.bottom - selectFit.contentElementRect.bottom;
         const header = selectFit.scrollContainerRect.top - selectFit.contentElementRect.top;
         const lastItemFitSize = selectFit.targetRect.bottom + selectFit.styles.itemTextToInputTextDiff - footer;
@@ -212,7 +216,7 @@ export class SelectPositioningStrategy extends BaseFitPositionStrategy implement
 }
 
 /** @hidden */
-export interface SelectFit extends ConnectedFit {
+interface SelectFit extends ConnectedFit {
     itemElement?: HTMLElement;
     scrollContainer: HTMLElement;
     scrollContainerRect: ClientRect;
@@ -222,7 +226,7 @@ export interface SelectFit extends ConnectedFit {
 }
 
 /** @hidden */
-export interface SelectStyles {
+interface SelectStyles {
     itemTextPadding?: number;
     itemTextIndent?: number;
     itemTextToInputTextDiff?: number;
diff --git a/projects/igniteui-angular/select/src/select/select.component.spec.ts b/projects/igniteui-angular/select/src/select/select.component.spec.ts
@@ -9,13 +9,14 @@ import { IGX_DROPDOWN_BASE, IgxDropDownItemComponent, ISelectionEventArgs } from
 import { IgxHintDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../../../input-group/src/public_api';
 import { IgxSelectComponent, IgxSelectFooterDirective, IgxSelectHeaderDirective } from './select.component';
 import { IgxSelectItemComponent } from './select-item.component';
-import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, IgxSelectionAPIService } from 'igniteui-angular/core';
+import { HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy, AutoPositionStrategy, IgxSelectionAPIService } from 'igniteui-angular/core';
 import { UIInteractions } from '../../../test-utils/ui-interactions.spec';
 import { IgxButtonDirective } from '../../../directives/src/directives/button/button.directive';
 import { IgxIconComponent } from 'igniteui-angular/icon';
 import { IgxSelectGroupComponent } from './select-group.component';
 import { IgxDropDownItemBaseDirective } from '../../../drop-down/src/drop-down/drop-down-item.base';
 import { addScrollDivToElement } from 'igniteui-angular/core/src/services/overlay/overlay.spec';
+import { IgxSelectOverlapPositionStrategy } from './select-overlap-positioning-strategy';
 
 const CSS_CLASS_INPUT_GROUP = 'igx-input-group';
 const CSS_CLASS_INPUT = 'igx-input-group__input';
@@ -191,6 +192,39 @@ describe('igxSelect', () => {
             expect(select.disabled).toBeTruthy();
         });
 
+        it('should use AutoPositionStrategy as the default position strategy', () => {
+            // The public overlaySettings input is undefined by default
+            expect(select.overlaySettings).toBeUndefined();
+            // The internal _overlayDefaults should use AutoPositionStrategy
+            expect((select as any)._overlayDefaults.positionStrategy).toBeInstanceOf(AutoPositionStrategy);
+            // The merged settings should target the input-group bundle element, not the raw input
+            const merged = (select as any).getMergedOverlaySettings();
+            const bundleElement = select.inputGroup.element.nativeElement.querySelector('.igx-input-group__bundle');
+            expect(merged.target).toBe(bundleElement);
+            expect(merged.target).not.toBe(select.getEditElement());
+        });
+
+        it('should allow opt-in to IgxSelectOverlapPositionStrategy via overlaySettings', fakeAsync(() => {
+            const overlapStrategy = new IgxSelectOverlapPositionStrategy(select);
+            select.overlaySettings = { positionStrategy: overlapStrategy };
+            expect(select.overlaySettings.positionStrategy).toBeInstanceOf(IgxSelectOverlapPositionStrategy);
+            expect((select.overlaySettings.positionStrategy as IgxSelectOverlapPositionStrategy).isItemOverlapPositioning).toBeTrue();
+            // The merged settings should switch the target to the raw input element
+            const merged = (select as any).getMergedOverlaySettings();
+            expect(merged.target).toBe(select.getEditElement());
+
+            // The select should still open correctly when using the overlap strategy
+            select.open();
+            tick();
+            fixture.detectChanges();
+            expect(select.collapsed).toBeFalsy();
+
+            select.close();
+            tick();
+            fixture.detectChanges();
+            expect(select.collapsed).toBeTruthy();
+        }));
+
         it('should open dropdown on input click', () => {
             const inputGroup = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP));
             expect(select.collapsed).toBeTruthy();
@@ -287,6 +321,7 @@ describe('igxSelect', () => {
 
         it('should properly emit opening/closing events on input click', fakeAsync(() => {
             const inputGroup = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT_GROUP));
+            const inputBundle = inputGroup.nativeElement.querySelector('.igx-input-group__bundle') as HTMLElement;
             expect(select).toBeTruthy();
 
             spyOn(select.opening, 'emit');
@@ -297,19 +332,19 @@ describe('igxSelect', () => {
             spyOn(select, 'open').and.callThrough();
             spyOn(select, 'close').and.callThrough();
 
-            inputGroup.nativeElement.click();
+            inputBundle.click();
             tick();
             fixture.detectChanges();
             verifyOpenCloseEvents(1, 0, 1);
 
-            inputGroup.nativeElement.click();
+            inputBundle.click();
             tick();
             fixture.detectChanges();
             verifyOpenCloseEvents(1, 1, 2);
 
             select.disabled = true;
             fixture.detectChanges();
-            inputGroup.nativeElement.click();
+            inputBundle.click();
             tick();
             fixture.detectChanges();
 
@@ -2220,6 +2255,7 @@ describe('igxSelect', () => {
         }));
     });
     describe('Positioning tests: ', () => {
+        describe('IgxSelectOverlapPositionStrategy positioning tests: ', () => {
         const defaultWindowToListOffset = 16;
         const defaultItemLeftPadding = 24;
         const defaultItemTopPadding = 0;
@@ -2258,6 +2294,7 @@ describe('igxSelect', () => {
                 fixture = TestBed.createComponent(IgxSelectMiddleComponent);
                 select = fixture.componentInstance.select;
                 fixture.detectChanges();
+                select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(select) };
                 inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT));
                 selectList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST_SCROLL));
                 addScrollDivToElement(fixture.nativeElement);
@@ -2358,6 +2395,7 @@ describe('igxSelect', () => {
                 fixture = TestBed.createComponent(IgxSelectTopComponent);
                 select = fixture.componentInstance.select;
                 fixture.detectChanges();
+                select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(select) };
                 inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT));
                 selectList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST_SCROLL));
             });
@@ -2407,6 +2445,7 @@ describe('igxSelect', () => {
                 fixture = TestBed.createComponent(IgxSelectBottomComponent);
                 select = fixture.componentInstance.select;
                 fixture.detectChanges();
+                select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(select) };
                 inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT));
                 selectList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST_SCROLL));
             });
@@ -2452,6 +2491,7 @@ describe('igxSelect', () => {
                 fixture = TestBed.createComponent(IgxSelectMiddleComponent);
                 fixture.detectChanges();
                 select = fixture.componentInstance.select;
+                select.overlaySettings = { positionStrategy: new IgxSelectOverlapPositionStrategy(select) };
                 inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT));
                 selectList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST_SCROLL));
                 addScrollDivToElement(fixture.nativeElement);
@@ -2557,6 +2597,30 @@ describe('igxSelect', () => {
                 verifyListPositioning();
             }));
         });
+        }); // end IgxSelectOverlapPositionStrategy positioning tests
+
+        describe('AutoPositionStrategy positioning tests: ', () => {
+            beforeEach(() => {
+                fixture = TestBed.createComponent(IgxSelectSimpleComponent);
+                select = fixture.componentInstance.select;
+                fixture.detectChanges();
+                inputElement = fixture.debugElement.query(By.css('.' + CSS_CLASS_INPUT));
+                selectList = fixture.debugElement.query(By.css('.' + CSS_CLASS_DROPDOWN_LIST_SCROLL));
+            });
+
+            it('should open and close correctly using the default AutoPositionStrategy', fakeAsync(() => {
+                expect((select as any)._overlayDefaults.positionStrategy).toBeInstanceOf(AutoPositionStrategy);
+                select.toggle();
+                tick();
+                fixture.detectChanges();
+                expect(select.collapsed).toBeFalsy();
+
+                select.toggle();
+                tick();
+                fixture.detectChanges();
+                expect(select.collapsed).toBeTruthy();
+            }));
+        });
     });
     describe('EditorProvider', () => {
         beforeEach(() => {
diff --git a/projects/igniteui-angular/select/src/select/select.component.ts b/projects/igniteui-angular/select/src/select/select.component.ts
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts
