Popup: Cannot read property 'getBoundingClientRect' of null

Popup: Cannot read property 'getBoundingClientRect' of null

Posted by: license on 12 February 2018, 7:37 pm EST

• 

  license

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 February 2018, 7:37 pm EST

  When a popup is inside an Angular Material Dialog (mat-dialog-container) we get the following error when trying to show the popup (through an owner trigger):

  ERROR TypeError: Cannot read property ‘getBoundingClientRect’ of null
  
  at Object.showPopup (wijmo.js:4175)
  
  at t.show (wijmo.input.js:13)
  
  at t._handleClick (wijmo.input.js:13)
  
  at ZoneDelegate.invokeTask (zone.js:421)
  
  at Object.onInvokeTask (core.js:4724)
  
  at ZoneDelegate.invokeTask (zone.js:420)
  
  at Zone.runTask (zone.js:188)
  
  at ZoneTask.invokeTask [as invoke] (zone.js:496)
  
  at invokeTask (zone.js:1517)
  
  at HTMLElement.globalZoneAwareCaptureCallback (zone.js:1575)

  The problems seems to be inside:
  
  function showPopup(popup, ref, above, fadeIn, copyStyles) {…}

  The following line seems to be the problem:
  
  var elParent = parent == document.body ? document.documentElement : popup.offsetParent

  popup.offsetParent returns NULL because popup has style.display = ‘none’ - and offsetParent will always be NULL when the element has style.display = ‘none’;

  In Wijmo .359 it seems to work because the following is called before asking for the popup.offsetParent:

  setCss(popup, {
  
  position: ‘absolute’,
  
  visibility: ‘hidden’,
  
  display: ‘’
  
  });

  I have tried hooking up on the popover’s showing event and manually set display = ‘’ - this seems to work every other time but it seems the showing event only is called every other time.

  So I believe that there is an error in showPopup(…) - e.g. that display needs to be cleared before asking for the popup.offsetParent.

  Can anyone confirm this?

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 12 February 2018, 8:38 pm EST

  Hi,

  Would it be possible for you to share a small sample application that replicates the issue so that we can investigate this in detail

• 

  license

  • Post Options:
  • Link
    Copy

  Posted 12 February 2018, 11:07 pm EST

  sample.zip

  I have attached a sample replicating the problem; requires “npm install”

  The popup that opens from the main page in the sample opens correctly. The popup that is supposed to open from the dialog throws the error.

• 

  abhishek.dutta

  

  • Post Options:
  • Link
    Copy

  Posted 13 February 2018, 7:49 pm EST

  Thanks for the sample. I am looking into it. Will get back to you on this tomorrow.

• 

  grapecity

  • Post Options:
  • Link
    Copy

  Posted 14 February 2018, 9:01 pm EST

  Hi Rasmus,

  I can reproduce this. I have escalated this to the devs. They would have a better explanation for this.

  Thanks for reporting this. (309199)

  ~nilay

• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Posted 26 February 2018, 8:20 pm EST

  Hi,
  
  This issue has been fixed and the fix will be included in the next release build. You may get the latest pre-release build for verifying issue from here:
  
  http://prerelease.componentone.com/wijmo5/

  ~Manish