Modal Keyboard Issue and solution

Topic: Modal Keyboard Issue and solution

mog5808 pro asked 6 years ago

Using the modals Angular2 i wanted to pass a configuration based on my requirements to the modal so i added the following to the modalDirective.ts

  public setConfiguration(config) {
    this._config = {
      backdrop: config.backdrop || true,
      keyboard: config.keyboard || true,
      focus: true,
      show: config.show || true,
      ignoreBackdropClick: false
    };
  }

problem is the keyboard JUST NEVER WORKS so i had to change the OnEsc method to the following

  // todo: consider preventing default and stopping propagation
  @HostListener('keydown.esc')
  public onEsc(): void {
    if (this.config.backdrop !== 'static') {
      this.hide();
    }
  }

I do not like this hack, but it seems to be the only solution. Please give it a look and advice if there is a better solution. Cheers

Add comment

Magdalena Obalska free answered 6 years ago

0 0 Best answer

Look at our website, at modals section - we have added an API, so now everything should be much clearer. :)

Add comment

mog5808 pro answered 6 years ago

0 0 Best answer

Thanks did not know about the [config] Cheers

Add comment

Magdalena Obalska free answered 6 years ago

0 0 Best answer

Sure, here's an example of basic modal with <code>[config]="{keyboard: false}"</code> added to the main div, so it's not possible to close it when the escape key is pressed. You can change 'false' to 'true', of course.

<pre><code><button md-ripple type="button" class="btn btn-primary relative" (click)="basicModal.show()" ripple-radius>Basic Example</button>

<div bsModal #basicModal="bs-modal" [config]="{keyboard: false}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>
            </div>
        </div>
    </div>
</div></code></pre>

Please insert min. 20 characters.

Sure, here's an example of basic modal with [config]="{keyboard: false}" added to the main div, so it's not possible to close it when the escape key is pressed. You can change 'false' to 'true', of course.

<button md-ripple type="button" class="btn btn-primary relative" (click)="basicModal.show()" ripple-radius>Basic Example</button>

<div bsModal #basicModal="bs-modal" [config]="{keyboard: false}" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myBasicModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close pull-right" aria-label="Close" (click)="basicModal.hide()">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer flex-column">
                <button type="button" class="btn btn-secondary ml-auto" aria-label="Close" (click)="basicModal.hide()" ripple-radius>Close</button>
                <button md-ripple  type="button" class="btn btn-primary relative ml-auto" ripple-radius>Save changes</button>
            </div>
        </div>
    </div>
</div>

Add comment

mog5808 pro answered 6 years ago

0 0 Best answer

Hello, Is there a way of passing the value of keyboard as i sometimes need it true and other times false Cheers

Add comment

Magdalena Obalska free answered 6 years ago

0 0 Best answer

Hi, there's no need to add your code in the modalDirective.ts file. Here's a short instruction for better solution: 1. open your typescript free folder, 2. open modals folder and find modalOptionsClass.ts file, 3. change declared modals options as you wish (keyboard: true/false).

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB Angular
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

mog5808

Pro User 26Support score
15Questions 21Answers 0Snippets