question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Cannot read property 'focus' of undefined on modal close

See original GitHub issue

I’m submitting a …

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior Whenever i open the modal and close it, the modal gets closed but i get an exception in the console saying

TypeError: Cannot read property 'focus' of undefined
    at ngx-smart-modal.js:1128
    at ZoneDelegate.invokeTask (zone.js:431)
    at Object.onInvokeTask (core.js:26247)
    at ZoneDelegate.invokeTask (zone.js:430)
    at Zone.runTask (zone.js:198)
    at ZoneTask.invokeTask (zone.js:513)
    at ZoneTask.invoke (zone.js:502)
    at timer (zone.js:3041)

Expected behavior There should be no exception thrown.

Reproduction of the problem My config for the modal is as follows :

<ngx-smart-modal
              #imageGallery
              identifier="imageGallery"
              customClass="nsm-dialog-animation-fade"
              class="imageGallery"
              (onOpen)="log('Modal opened!')"
              (onClose)="log('Modal closed!')"
              (onDismiss)="log('Modal dismissed!')"
              (onAnyCloseEvent)="modalClosed()"
              [dismissable]="false"
              [escapable]="false"
              [hideDelay]="100"
            >
              <!-- Rest of the code -->
</ngx-smart-modal>

Steps to reporduce:

  1. Configure the modal with the above options.
  2. Open the modal.
  3. Close the modal. We can notice the exception thrown in console.

What is the motivation / use case for changing the behavior? N/A

Please tell us about your environment: OS: Win 10 Node: v10.16.0 Angular: 8.2

  • Smart Modal version: 7.3.0

  • Angular version: 8.2

  • Browser: [all ]

  • Language: [all ]

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:3
  • Comments:12 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
ish2028commented, Jan 6, 2020

I ran across the same issue and I was calling ngxModalService.open('modalName'). When I changed it to ngxModalService.getModal('modalName').open(), the error didn’t happen again.

1reaction
mehranmb78commented, Jun 16, 2020

if you dont need to focus on native element after modal close, set “refocus” option to false to avoid this error. its work for me

Read more comments on GitHub >

github_iconTop Results From Across the Web

Cannot read property 'focus' of undefined in VUE When setting ...
Cannot read property 'focus' of undefined. This only happens for the else part of my method function . For this specific issue is...
Read more >
Modal dialog not closing properly if initialized in different ...
Modal dialog not closing properly if initialized in different container then the grid itself with "Cannot read property 'focus' of undefined" | ...
Read more >
Modal - Bootstrap
Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
Read more >
How to set focus to input element in modal dialog
I guess this is caused by the following constellation: The ViewChild is injected at component creation, but since the input element is intially...
Read more >
react-modal documentation
We seek to keep the focus on accessibility while providing a functional, ... This attribute when set as `null` doesn't add any class...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found