Window Modal Focus Error

[a2m developerParticipant]

If you configure a Modal Window then click outside the window (on the modal background) you get an Uncaught TypeError:

Console Error: Uncaught TypeError: Failed to execute 'focus' on 'HTMLElement': parameter 1 ('options') is not an object.

From jqxWindow.js
this.addHandler(this._modalBackground,"mousedown",function(i){var h=f._getTabbables();if(h.length>0){ h[0].focus(1);setTimeout(function(){h[0].focus(1)},100)}i.preventDefault();return false})

From https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus :
element.focus(focusOption); // Object parameter

Parameters:
focusOptions Optional
Is an Object with the following property:

preventScroll Optional
Is a Boolean value:

If false, the method will scroll the element into the visible area of the browser window
If true, the method will NOT scroll the element into the visible area of the browser window.

[StanislavParticipant]

Hello a2m developer,

I did some tests and no error was thrown.
Can you please send us an example of the issue?

Also, we have an API for focus: Example.

!* Please do not post code from the widgets source code on the forum *!

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[a2m developerParticipant]

Hi Stanislav,

I’m using Angular v 5.2.5.

Component Template:

<jqxWindow #createMenuWindow id="create-menu-window" [width]="'200px'" [height]="'300px'" [minHeight]="'300px'" [minWidth]="'200px'"
  [maxHeight]="'400px'" [maxWidth]="'600px'" [isModal]="true" [resizable]="true" [autoOpen]='false' [showCloseButton]='true'
  [theme]='theme' [title]="title">

  <div #windowHeader> </div>
  <div #windowContent id="create-menu">
  </div>
</jqxWindow>

I run the app, open the window and once I click on the ‘Modal Background’ I get an error in the console. I am not calling focus. Focus is being called from the jqxWindow.js

core.js:1448 ERROR TypeError: Failed to execute 'focus' on 'HTMLElement': parameter 1 ('options') is not an object.
    at HTMLDivElement.eval (jqxwindow.js:7)
    at HTMLDivElement.dispatch (scripts.bundle.js:3)
    at HTMLDivElement.r.handle (scripts.bundle.js:3)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4736)
    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 HTMLDivElement.globalZoneAwareCallback (zone.js:1543)

Not too sure why posting source code on the forum is frowned upon, especially since everyone can see your source code on github. Just saying.

[myguParticipant]

Hi Stanislav, I have the same problem, and it seems to have been updated recently.

jqwidgets-framework	v5.6.0
@angular	        v5.2.6

ERROR TypeError: Failed to execute 'focus' on 'HTMLElement': parameter 1 ('options') is not an object.
    at HTMLDivElement.<anonymous> (scripts.bundle.js:558)
    at HTMLDivElement.dispatch (scripts.bundle.js:2)
    at HTMLDivElement.y.handle (scripts.bundle.js:2)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    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 HTMLDivElement.globalZoneAwareCallback (zone.js:1543)

[StanislavParticipant]

Hello a2m developer, mygu,

We can’t reproduce this issue.

I am testing with a2m developer example and it works fine.

I am using the following version:
nodeJS: 9.4.0
npm: 5.6.0
jqwidgets-framework: 5.6.0/jqwidgets-scripts: 5.6.0(I tested with both)

Here are all my ‘dependencies’:

"@angular/animations": "5.2.0",
    "@angular/common": "5.2.0",
    "@angular/compiler": "5.2.0",
    "@angular/core": "5.2.0",
    "@angular/forms": "5.2.0",
    "@angular/http": "5.2.0",
    "@angular/platform-browser": "5.2.0",
    "@angular/platform-browser-dynamic": "5.2.0",
    "@angular/router": "5.2.0",
    "core-js": "2.5.3",
    "jqwidgets-framework": "^5.6.0",
    "jqwidgets-scripts": "^5.6.0",
    "rxjs": "5.5.6",
    "zone.js": "0.8.20"

Please update to the latest version, and if the issue persists, send us some more examples.

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[a2m developerParticipant]

Hi Stansilav,

Try updating your template to:

<jqxWindow #createMenuWindow id="create-menu-window" class="CREATE_MENU" [isModal]="true" [resizable]="true" [autoOpen]='false'
  [showCloseButton]='false' [theme]='theme' [title]="title" (onClose)="onClose($event)">

  <div #windowHeader> </div>
  <div #windowContent id="create-menu" style="width: 100%">
    <input type="text" />
  </div>
</jqxWindow>

The error should display in the console when focus(1) is called on the input element in the content div. If you were using my exact template you would not have gotten an error because there was not an “tabable” element within the window to call focus(1) on.

I’m still confused on what the purpose of the parameter 1 is for. I don’t see any focus function defined in the source code that takes a parameter. If focus being called is intended to be on your own API then you guys have a scope issue.

[StanislavParticipant]

Hello a2m developer,

I did tests with the new template example you provided and I did get the error.
It seems that this is an error caused by the window widget itself, not angular specific.

Thank you for reporting this to us!

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[a2m developerParticipant]

What is the status on this error? Has it been fixed? and if so what version has the fix?

[MartinParticipant]

Hello a2m developer,

All new things and bug fixes you could find in the Release History page.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[a2m developerParticipant]

Hey Martin,

I don’t see the fix in this latest April 2018 release. Is there a better way I can track the status of this bug?

Thank you.

[MartinParticipant]

Hello a2m developer,

As I said, all bug fixes you will be able to find in the Release History page.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[myguParticipant]

Hi Martin,

I’ve been following at this issue, but so far it doesn’t seem to have been fixed.

I am using the following version:

NodeJS: v8.11.1
npm: v5.10.0
Angular: v6.0.5
jqwidgets-framework: v5.7.2

Thank you for your hard work. I hope this issue can be fixed soon.

Best wishes!

[Author]

Posts