jQuery UI Widgets Forums Dialogs and Notifications Window Window Modal Focus Error

This topic contains 11 replies, has 4 voices, and was last updated by  mygu 1 year, 7 months ago.

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • Window Modal Focus Error #98918

    a2m developer
    Participant

    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.

    Window Modal Focus Error #98936

    Stanislav
    Participant

    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/

    Window Modal Focus Error #98956

    a2m developer
    Participant

    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.

    Window Modal Focus Error #98970

    mygu
    Participant

    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)
    
    Window Modal Focus Error #98975

    Stanislav
    Participant

    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/

    Window Modal Focus Error #98988

    a2m developer
    Participant

    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.

    Window Modal Focus Error #99002

    Stanislav
    Participant

    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/

    Window Modal Focus Error #100627

    a2m developer
    Participant

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

    Window Modal Focus Error #100632

    Martin
    Participant

    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/

    Window Modal Focus Error #100639

    a2m developer
    Participant

    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.

    Window Modal Focus Error #100643

    Martin
    Participant

    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/

    Window Modal Focus Error #100659

    mygu
    Participant

    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!

    • This reply was modified 1 year, 7 months ago by  mygu.
Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.