CODEWITHSUNDEEP
ng-bootstrap
Dordrecht
Dordrecht

Reputation: 53

How would one close previously opened NgbDropdowns when new NgbDropdowns are opend using the enter key?

I'm a newbie to NgbDropdown and related ng-bootstrap code, and I'm having trouble figuring out how to close all previous NgbDropdowns when a new one is opened using the enter key.

I've created a number of NgbDropdowns on a page in my Angular project, and I find that when I click from dropdown button to dropdown button, the previously opened dropdown closes; however, if I TAB from an open dropdown to another dropdown button and use the enter key to open the second dropdown, as may be needed for accessibility, the first dropdown does NOT close. I am left with two drop-downs overlaying each other.

This sequence can be duplicated on the main NgbDropdown example page at https://ng-bootstrap.github.io/#/components/dropdown/examples: on a different button (First example at the top.)

Sequence: 1. Tab to "Toggle Dropdown" 2. Hit the enter key to open the dropdown 3. Tab through the dropdown options, pluse one more time, so that you've tabbed to the "toggle drop-up" button. 4. Hit the enter key 5. Both dropdowns will be open simultaneously.

Screen Shot

So apparently the code that closes previous dropdowns on click doesn't work when the enter key is pressed on a different button. Not finding much documentation about what can be done with the various Ngb objects in typescript, I am left not knowing how to close all previous dropdowns when a new dropdown is opened with the enter key. All I can think of doing is:

1) Loop over all dropdowns in the ts file, closing them prior to opening the latest. If this is the best solution, I do not see any way to loop over a collection of open drop-downs. Is there such an object/array available to me as part of the NgbSolution, or would I have to add each to an array on my own?

2) Trigger the click event when the enter key is pressed on a button. Again, I am unaware of how to have one event trigger another on an NgbDropdown object.

Any pointers would be appreciated. I've not posted my code here because it is the same as the basic example referenced above.

Upvotes: 2

Views: 3804

Answers (1)

Ian A
Ian A

Reputation: 6128

For your suggestion #1 (loop over all dropdowns and close them), you can implement it as follows:

  1. In your HTML, declare each dropdown as a DOM variable using Template Reference Variables (the # syntax):
    <div ngbDropdown class="d-inline-block" #dd1="ngbDropdown">
    ...
    </div>
  1. Add a click handler to the button as follows. This allows you to pass in a reference to the dropdown to the function called by the click handler:
     <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="closeOthers(dd1)">Toggle dropdown</button>

The complete HTML for a dropdown should look like this:

<div ngbDropdown class="d-inline-block" #dd1="ngbDropdown">
    <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle (click)="closeOthers(dd1)">
        Toggle dropdown
    </button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
        <button ngbDropdownItem>Action - 1</button>
        <button ngbDropdownItem>Another Action</button>
        <button ngbDropdownItem>Something else is here</button>
    </div>
</div>
  1. Add the following as a class variable of your Typescript component. This allows you to reference all the dropdowns displayed in the component from the Typescript file:
@ViewChildren(NgbDropdown) dropdowns: QueryList<NgbDropdown>;
  1. Add a click function to your Typescript component:
  closeOthers(clickedDropdown: NgbDropdown) {
    // Close all dropdowns
    this.dropdowns.toArray().forEach(el => {
        el.close();
    });
    // Open the dropdown that was clicked on
    clickedDropdown.open();
  }

Now whenever you click on a dropdown (or select it by tabbing and pressing return) it will call the closeOthers function which will:

  • Close all dropdowns
  • Open the dropdown that was clicked

Please see this StackBlitz for a working demo.

@Dordrecht - the approach I would take for the functionality mentioned in your comment below would be to create a service as follows:

export class ModalNotificationService {

    private _closeModals: Subject<void> = new Subject<void>();
    private _closeModals$: Observable<void> = this._closeModals.asObservable();

    public emitCloseModalEvent() {
        this._closeModals.next();
    }

    get closeModals$(): Observable<void> {
        return this._closeModals$;
    }

}

This service would be injected into any component that has modals and those components would subscribe to the observable closeModals$ and then close the modals in their own component. Modify the closeOthers method to call the new service's emitCloseModalEvent method to notify all the other components.

Upvotes: 2

Related Questions