feat(modal): [ngbAutofocus] option #2737

benouat · 2018-09-21T09:52:38Z

As mentioned in #2728 this PR introduced 2 new features:

ability to use a new ngbAutofocus attribute in your modal templates

<!-- will be focused after the modal opens -->
<input type="text" ngbAutofocus />

introduction of a new focusFirst Modal Config option (will basically works as ngbAutofocus but finding automatically the first focusable element)
```
/**
 * Assign focus to the first focusable element when opened (true by default)
 */
focusFirst?: boolean;
```

Any newly opened modal will now do in that order:

If ngbAutofocus is detected, it will be used to focus the decorated element.
Else, it will look at focusFirst value (default to be true), find the first focusable element, and focus it.
At this point, if nothing has been focus (not focusable element found, or focusFirst set to false) it will simply focus itself (the modal window).

Another PR will be opened to demonstrate the usage of these new features in the Modal demos

Closes #2718

benouat · 2018-09-21T12:43:51Z

After discussing with @pkozlowski-opensource I will update PR to drop the config option focusFirst and will hardcode focusFirst: true behaviour in the code.

So new rules are like so:

If ngbAutofocus is detected, it will be used to focus the decorated element.
Otherwise first tabbable element will get focused.
If no element matches these 2 previous rules, fallback is to give focus to modal window.

pkozlowski-opensource · 2018-09-21T14:21:57Z

src/modal/modal-config.ts

+
+  /**
+   * Assign focus to the first focusable element when opened (true by default)
+   * @since 3.3.0


Please don't add the version since we don't know when it is going to be merged. I will add those when cutting a release.

Ok, I will remove it !

pkozlowski-opensource · 2018-09-21T14:22:00Z

src/modal/modal-config.ts

+   * Assign focus to the first focusable element when opened (true by default)
+   * @since 3.3.0
+   */
+  focusFirst?: boolean;


My understanding was that we don't want to introduce this option for now. Did anything change?

Did you see any new code push to this PR branch between my comment where I said I will remove it and now ? 😜

It will be removed...

pkozlowski-opensource · 2018-09-21T14:22:13Z

src/modal/modal-config.ts

@@ -75,4 +81,5 @@ export interface NgbModalOptions {
 export class NgbModalConfig implements NgbModalOptions {
  backdrop: boolean | 'static' = true;
  keyboard = true;
+  focusFirst = true;


My understanding was that we don't want to introduce this option for now. Did anything change?

pkozlowski-opensource · 2018-09-21T14:22:28Z

src/modal/modal-stack.ts

@@ -21,7 +21,8 @@ import {NgbModalWindow} from './modal-window';

 @Injectable({providedIn: 'root'})
 export class NgbModalStack {
-  private _windowAttributes = ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'size', 'windowClass'];
+  private _windowAttributes =
+      ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'size', 'windowClass', 'focusFirst'];


My understanding was that we don't want to introduce this option for now. Did anything change?

+1, you forgot to delete the focusFirst option

pkozlowski-opensource · 2018-09-21T14:24:16Z

src/util/focus-trap.ts

 import {Key} from '../util/key';

-const FOCUSABLE_ELEMENTS_SELECTOR = [
+export const FOCUSABLE_ELEMENTS_SELECTOR = [


maybe it would be better to export a utility function instead?

benouat · 2018-09-24T12:15:30Z

@pkozlowski-opensource I made changes according to your review and also added a new demo for both explanation and illustration of the feature.

mboughaba · 2018-09-24T12:30:36Z

src/modal/modal-window.ts

@@ -62,7 +63,17 @@ export class NgbModalWindow implements OnInit,

  ngAfterViewInit() {
    if (!this._elRef.nativeElement.contains(document.activeElement)) {
-      this._elRef.nativeElement['focus'].apply(this._elRef.nativeElement, []);
+      let elementToFocus = this._elRef.nativeElement.querySelector(`[ngbAutofocus]`) as HTMLElement;
+      if (!elementToFocus) {


suggestion: Can you please merge this two level if statement, it looks maybe confusing (at least form me)

maxokorokov

Hey,

ok for me, but:

stackblitz doesn't work
you forgot the focusFirst option on modal

maxokorokov · 2018-10-04T09:20:14Z

src/modal/modal-stack.ts

@@ -21,7 +21,8 @@ import {NgbModalWindow} from './modal-window';

 @Injectable({providedIn: 'root'})
 export class NgbModalStack {
-  private _windowAttributes = ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'size', 'windowClass'];
+  private _windowAttributes =
+      ['ariaLabelledBy', 'backdrop', 'centered', 'keyboard', 'size', 'windowClass', 'focusFirst'];


+1, you forgot to delete the focusFirst option

src/modal/modal-window.ts

benouat · 2018-10-05T09:39:19Z

I am having a look at failing stackblitz

pkozlowski-opensource · 2018-10-05T11:55:16Z

misc/stackblitz-gen.js

@@ -57,15 +58,16 @@ function generateIndexHtml() {
  return `<!DOCTYPE html>
 <html>

-  <head>
+  <head>xx


what the o_O ?? I have no clue why there are here, will remove them of course

pkozlowski-opensource · 2018-10-05T11:55:37Z

misc/stackblitz-gen.js

    <title>ng-bootstrap demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/${versions.bootstrap}/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.css" />


Because of a snippet of code I have in the demo

pkozlowski-opensource · 2018-10-05T11:56:56Z

misc/stackblitz-gen.js

@@ -110,10 +112,10 @@ import { AppComponent } from './app.component';
 import { ${demoImports} } from '${demoImport}';

 @NgModule({
-  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()], 
+  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()],


There are ws changes in this file and others - why?

BTW, I know it is not related to your change, but why do we have NgbModule.forRoot() here?

We never updated it i think... I will remove them

pkozlowski-opensource · 2018-10-05T11:58:04Z

src/modal/modal-window.ts

@@ -76,8 +81,7 @@ export class NgbModalWindow implements OnInit,
    } else {
      elementToFocus = body;
    }
-    elementToFocus['focus'].apply(elementToFocus, []);
-
+    elementToFocus.focus();


Do you know why we've called it through apply before and don't do this here any more?

I have no clue at all why you wrote all of these with apply(). The only thing I know is that it seems to be not needed anymore. It works fine without it. So it makes the code easier to read

pkozlowski-opensource · 2018-10-05T11:58:35Z

src/modal/modal.module.ts

 import {NgbModalBackdrop} from './modal-backdrop';
 import {NgbModalWindow} from './modal-window';
-import {NgbModal} from './modal';


Why there are changes in this file?

I have no clue... maybe formatting side effect....
[edit]: seems like a reordering of the import

simply decorate any element with this attribute to notify modal window to put focus on it when open.

pkozlowski-opensource · 2018-10-05T12:58:40Z

LGTM

maxokorokov added component: modal needs: review type: feature labels Sep 21, 2018

maxokorokov added this to the 3.3.0 milestone Sep 21, 2018

pkozlowski-opensource reviewed Sep 21, 2018

View reviewed changes

benouat force-pushed the feat/modal/autofocus branch from 54c09c5 to f2055bb Compare September 24, 2018 12:13

benouat changed the title ~~feat(modal): [ngbAutofocus] and 'focusFirst' modal config option~~ feat(modal): [ngbAutofocus] option Sep 24, 2018

mboughaba reviewed Sep 24, 2018

View reviewed changes

maxokorokov requested changes Oct 4, 2018

View reviewed changes

maxokorokov added needs: work and removed needs: review labels Oct 4, 2018

benouat force-pushed the feat/modal/autofocus branch from f2055bb to aab1748 Compare October 5, 2018 09:36

benouat force-pushed the feat/modal/autofocus branch from aab1748 to d4c23d9 Compare October 5, 2018 10:05

pkozlowski-opensource reviewed Oct 5, 2018

View reviewed changes

feat(modal): [ngbAutofocus] option

9337f27

simply decorate any element with this attribute to notify modal window to put focus on it when open.

benouat force-pushed the feat/modal/autofocus branch from d4c23d9 to 9337f27 Compare October 5, 2018 12:09

pkozlowski-opensource merged commit 10fd5e4 into ng-bootstrap:master Oct 5, 2018

maxokorokov mentioned this pull request Dec 19, 2018

default focus #2937

Closed

KillerCodeMonkey mentioned this pull request Jan 9, 2019

Focus problem with NgbModal KillerCodeMonkey/ngx-quill#316

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(modal): [ngbAutofocus] option #2737

feat(modal): [ngbAutofocus] option #2737

benouat commented Sep 21, 2018

benouat commented Sep 21, 2018

pkozlowski-opensource Sep 21, 2018

benouat Sep 21, 2018

pkozlowski-opensource Sep 21, 2018

benouat Sep 21, 2018

pkozlowski-opensource Sep 21, 2018

pkozlowski-opensource Sep 21, 2018

maxokorokov Oct 4, 2018

pkozlowski-opensource Sep 21, 2018

benouat commented Sep 24, 2018

mboughaba Sep 24, 2018

maxokorokov left a comment

maxokorokov Oct 4, 2018

benouat commented Oct 5, 2018

pkozlowski-opensource Oct 5, 2018

benouat Oct 5, 2018

pkozlowski-opensource Oct 5, 2018

benouat Oct 5, 2018

pkozlowski-opensource Oct 5, 2018

benouat Oct 5, 2018

pkozlowski-opensource Oct 5, 2018

benouat Oct 5, 2018

pkozlowski-opensource Oct 5, 2018

benouat Oct 5, 2018 •

edited

Loading

pkozlowski-opensource commented Oct 5, 2018

feat(modal): [ngbAutofocus] option #2737

feat(modal): [ngbAutofocus] option #2737

Conversation

benouat commented Sep 21, 2018

benouat commented Sep 21, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benouat commented Sep 24, 2018

Choose a reason for hiding this comment

maxokorokov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benouat commented Oct 5, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

benouat Oct 5, 2018 • edited Loading

Choose a reason for hiding this comment

pkozlowski-opensource commented Oct 5, 2018

benouat Oct 5, 2018 •

edited

Loading