Fix(oppia#23651): Trigger library search on filter change (oppia#23779)

* fix(library): Fix filter test and trigger search on dropdown close

* fix(library): Fix filter test and trigger search on dropdown close

* Fix(library): Rename dropdown method, fix HTML indentation and update tests

* Fix HTML indentation and line length

* Fix HTML indentation and line length

* Resolve merge conflict: Update CSS to float-start

Author: AmiyaPiyush1

core/templates/pages/library-page/search-bar/search-bar.component.html

@@ -26,6 +26,7 @@
   <div [ngClass]="{'open' : activeMenuName === 'category', 'dropup' : enableDropup}"
        ngbDropdown
        autoClose="outside"
+       (openChange)="triggerSearchOnDropdownClose($event)"
        class="search-bar-float-start oppia-navbar-button-container oppia-search-bar-category-selector e2e-test-search-bar-category-selector dropdown">
     <button ngbDropdownToggle
             type="button"
@@ -125,6 +126,7 @@
   <div ngbDropdown
        autoClose="outside"
        [ngClass]="{'open' : activeMenuName === 'language', 'dropup' : enableDropup}"
+       (openChange)="triggerSearchOnDropdownClose($event)"
        class="search-bar-float-start oppia-navbar-button-container oppia-search-bar-language-selector e2e-test-search-bar-language-selector dropdown">
     <button ngbDropdownToggle
             type="button"

core/templates/pages/library-page/search-bar/search-bar.component.spec.ts

@@ -296,6 +296,14 @@ describe('Search bar component', () => {
     expect(component.refreshSearchBarLabels).toHaveBeenCalled();
   });
 
+  it('should trigger search query only when dropdown is closed', () => {
+    spyOn(component, 'onSearchQueryChangeExec');
+    component.triggerSearchOnDropdownClose(true);
+    expect(component.onSearchQueryChangeExec).not.toHaveBeenCalled();
+    component.triggerSearchOnDropdownClose(false);
+    expect(component.onSearchQueryChangeExec).toHaveBeenCalled();
+  });
+
   it('should deselectAll', () => {
     spyOn(component, 'updateSelectionDetails');
     spyOn(component, 'refreshSearchBarLabels');

core/templates/pages/library-page/search-bar/search-bar.component.ts

@@ -185,13 +185,22 @@ export class SearchBarComponent implements OnInit, OnDestroy {
     this.updateSelectionDetails(itemsType);
     this.refreshSearchBarLabels();
   }
-
   deselectAll(itemsType: string): void {
     this.selectionDetails[itemsType].selections = {};
     this.updateSelectionDetails(itemsType);
     this.refreshSearchBarLabels();
   }
 
+  /**
+   * Triggers a search query when the dropdown menu is closed.
+   * @param {boolean} isOpen - The new open state of the dropdown.
+   */
+  triggerSearchOnDropdownClose(isOpen: boolean): void {
+    if (!isOpen) {
+      this.onSearchQueryChangeExec();
+    }
+  }
+
   onSearchQueryChangeExec(): void {
     let searchUrlQueryString = this.searchService.getSearchUrlQueryString(
       this.searchQuery,