Merge branch 'master' into bpachilova/fix-14135

Author: wnvko

CHANGELOG.md

@@ -36,6 +36,10 @@ All notable changes for each version of this project will be documented in this
 ### General
 - Removed deprecated property `displayDensity`. Size is now controlled only through the custom CSS property `--ig-size`. Refer to the [Update Guide](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide) and components documentation for usage details.
 
+### General
+- `IgxSimpleCombo`
+    - **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
+
 ## 17.2.0
 ### New Features
 - `IgxAvatar`

projects/igniteui-angular/migrations/update-18_0_0/index.spec.ts

@@ -35,7 +35,10 @@ describe(`Update to ${version}`, () => {
     beforeEach(() => {
         appTree = new UnitTestTree(new EmptyTree());
         appTree.create('/angular.json', JSON.stringify(configJson));
-        appTree.create('/testSrc/styles.scss', '');
+        appTree.create('/testSrc/styles.scss', `
+@use "mockStyles.scss";
+@forward something;
+`);
     });
 
     const migrationName = 'migration-38';
@@ -434,8 +437,12 @@ describe(`Update to ${version}`, () => {
 
     it('should add default CSS rule to set all components to their previous Large defaults', async () => {
         const tree = await schematicRunner.runSchematic(migrationName, { shouldInvokeLS: false }, appTree);
-        expect(tree.readContent('/testSrc/styles.scss')).toContain(
+        expect(tree.readContent('/testSrc/styles.scss')).toEqual(
 `
+@use "mockStyles.scss";
+@forward something;
+// Specifies large size for all components to match the previous defaults
+// This may not be needed for your project. Please consult https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide for more details.
 :root {
     --ig-size: var(--ig-size-large);
 }

projects/igniteui-angular/migrations/update-18_0_0/index.ts

@@ -100,12 +100,23 @@ export default (): Rule => async (host: Tree, context: SchematicContext) => {
             }
 
             const content = cssBuffer.toString('utf-8');
-            const newContent = `
+            let newContent = `
 // Specifies large size for all components to match the previous defaults
 // This may not be needed for your project. Please consult https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/update-guide for more details.
 :root {
     --ig-size: var(--ig-size-large);
-}\n` + content;
+}\n`;
+
+            const lastUse = content.lastIndexOf('@use');
+            const lastForward = content.lastIndexOf('@forward');
+            if (lastUse > -1 || lastForward > -1) {
+                const lastLinePos = Math.max(lastForward, lastUse);
+                const fragment = content.substring(lastLinePos);
+                const insertPos = fragment.indexOf(';') + lastLinePos + 1;
+                newContent = content.substring(0, insertPos) + newContent + content.substring(insertPos + 1);
+            } else {
+                newContent = newContent + content;
+            }
 
             // Write the new content to the CSS file
             host.overwrite(stylesPath, newContent);

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -1780,6 +1780,45 @@ describe('IgxSimpleCombo', () => {
                 expect(combo.valid).toEqual(IgxInputState.INVALID);
                 expect(combo.comboInput.valid).toEqual(IgxInputState.INVALID);
             });
+
+            it('Should update the model only if a selection is changing otherwise it shoudl be undefiend when the user is filtering in templeted form', fakeAsync(() => {
+                input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+                let model;
+
+                combo.open();
+                fixture.detectChanges();
+                const item2 = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[3];
+                item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+
+                expect(combo.displayValue).toEqual('Illinois');
+                expect(combo.value).toEqual('Illinois');
+                expect(model).toEqual('Illinois');
+
+                combo.deselect();
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+
+                expect(combo.selection).not.toBeDefined();
+                expect(model).toEqual(undefined);
+                expect(combo.displayValue).toEqual('');
+
+                combo.focusSearchInput();
+                UIInteractions.simulateTyping('con', input);
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+                expect(combo.comboInput.value).toEqual('con');
+                expect(model).toEqual(undefined);
+
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+                fixture.detectChanges();
+                model = fixture.componentInstance.values;
+                expect(combo.selection).toBeDefined()
+                expect(combo.displayValue).toEqual('Wisconsin');
+                expect(combo.value).toEqual('Wisconsin');
+                expect(model).toEqual('Wisconsin');
+            }));
         });
         describe('Reactive form tests: ', () => {
             beforeAll(waitForAsync(() => {
@@ -2036,6 +2075,40 @@ describe('IgxSimpleCombo', () => {
                 expect((combo as any).inputGroup.element.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_INVALID)).toBe(true);
                 expect((combo as any).inputGroup.element.nativeElement.classList.contains(CSS_CLASS_INPUT_GROUP_REQUIRED)).toBe(false);
             }));
+
+            it('Should update the model only if a selection is changing otherwise it shoudl be undefiend when the user is filtering in reactive form', fakeAsync(() => {
+                const form = (fixture.componentInstance as IgxSimpleComboInReactiveFormComponent).comboForm;
+                input = fixture.debugElement.query(By.css(`.${CSS_CLASS_COMBO_INPUTGROUP}`));
+
+                combo.open();
+                fixture.detectChanges();
+                const item2 = fixture.debugElement.queryAll(By.css(`.${CSS_CLASS_DROPDOWNLISTITEM}`))[3];
+                item2.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+                fixture.detectChanges();
+
+                expect(combo.displayValue).toEqual('Four');
+                expect(combo.value).toEqual(4);
+                expect(form.controls['comboValue'].value).toEqual(4);
+
+                combo.deselect();
+                fixture.detectChanges();
+
+                expect(combo.selection).not.toBeDefined()
+                expect(form.controls['comboValue'].value).toEqual(undefined);
+                expect(combo.displayValue).toEqual('');
+
+                combo.focusSearchInput();
+                UIInteractions.simulateTyping('on', input);
+                fixture.detectChanges();
+                expect(combo.comboInput.value).toEqual('on');
+                expect(form.controls['comboValue'].value).toEqual(undefined);
+
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+                expect(combo.selection).toBeDefined()
+                expect(combo.displayValue).toEqual('One');
+                expect(combo.value).toEqual(1);
+                expect(form.controls['comboValue'].value).toEqual(1);
+            }));
         });
     });
 

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -282,7 +282,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         if (event !== undefined) {
             this.filterValue = this.searchValue = typeof event === 'string' ? event : event.target.value;
         }
-        this._onChangeCallback(this.searchValue);
         if (this.collapsed && this.comboInput.focused) {
             this.open();
         }