feat(simple-combo): ArrowUp does not immediately close dropdown (#12589)

* feat(simple-combo): dropdown remains open on ArrowUp

* chore(simple-combo): update README keyboard navigation section

* chore(*): update CHANGELOG with new behavior

* chore(*): update CHANGELOG

Author: RivaIvanova

CHANGELOG.md

@@ -8,6 +8,8 @@ All notable changes for each version of this project will be documented in this
     - Added new auto-sizing API `recalculateAutoSizes` that recalculates widths of columns that have size set to `auto`. Can be used in scenarios where you want to auto-size the columns again post initialization.
 - `igxPivotGrid`
     - Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
+- `IgxSimpleCombo`
+    - **Behavioral Change** - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
 
 ## 15.0.0
 

projects/igniteui-angular/src/lib/simple-combo/README.md

@@ -243,10 +243,10 @@ When defining one of them, you need to reference list of predefined names, as fo
 ## Keyboard Navigation
 
 When the combo is closed and focused:
-- `ArrowDown` or `Alt` + `ArrowDown` will open the dropdown and will move focus to the selected item, if no selected item is present, the first item in the list will lbe focused.
+- `ArrowDown` or `Alt` + `ArrowDown` will open the dropdown and will move focus to the selected item, if no selected item is present, the first item in the list will be focused.
 
 When the combo is opened:
-- `ArrowUp` will close the dropdown and will move focus to the input while also selecting all of the text in the input if the currently focused item is the first item in the list. Otherwise `ArrowUp` will move to the previous list item.
+- `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
 - `ArrowDown` will move focus from the search input to the first list item. If list is empty and custom values are enabled will move it to the Add new item button.
 - `Alt` + `ArrowUp` will close the dropdown.
 

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

@@ -857,6 +857,24 @@ describe('IgxSimpleCombo', () => {
             expect(combo.close).toHaveBeenCalledTimes(2);
         }));
 
+        it('should not close the dropdown on ArrowUp key if the active item is the first one in the list', fakeAsync(() => {
+            combo.open();
+            tick();
+            fixture.detectChanges();
+
+            const list = fixture.debugElement.query(By.css(`.${CSS_CLASS_CONTENT}`));
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowDown', list);
+            tick();
+            fixture.detectChanges();
+            expect(combo.collapsed).toEqual(false);
+
+            UIInteractions.triggerEventHandlerKeyDown('ArrowUp', list);
+            tick();
+            fixture.detectChanges();
+            expect(combo.collapsed).toEqual(false);
+        }));
+
         it('should select an item from the dropdown list with the Space key without closing it', () => {
             combo.open();
             fixture.detectChanges();

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

@@ -398,7 +398,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.dropdownContainer.nativeElement.focus();
         } else {
             this.comboInput.nativeElement.focus();
-            this.toggle();
         }
     }