Skip to content

Commit 90667c6

Browse files
committed
feat(modal): restore focus on modal hide, set focus to visible modal
(cherry picked from commit 5115958)
1 parent 833e085 commit 90667c6

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

projects/coreui-angular/src/lib/modal/modal/modal.component.ts

+20
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,26 @@ export class ModalComponent implements OnInit, OnDestroy, AfterViewInit {
148148

149149
#visible: WritableSignal<boolean> = signal(false);
150150

151+
#activeElement: HTMLElement | null = null;
152+
153+
#visibleEffect = effect(() => {
154+
if (this.#visible() && this.#afterViewInit()) {
155+
this.#activeElement = this.document.activeElement as HTMLElement;
156+
// this.#activeElement?.blur();
157+
setTimeout(() => {
158+
const focusable = this.modalContentRef.nativeElement.querySelectorAll('[tabindex]:not([tabindex="-1"]), button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled])');
159+
this.#focusMonitor.focusVia(focusable[0], 'keyboard');
160+
});
161+
} else {
162+
if (this.document.contains(this.#activeElement)) {
163+
setTimeout(() => {
164+
this.#activeElement?.focus();
165+
this.#activeElement = null;
166+
});
167+
}
168+
}
169+
});
170+
151171
/**
152172
* Event triggered on modal dismiss.
153173
*/

0 commit comments

Comments
 (0)