jQWidgets Forums

Tagged: Tab Modal Window

This topic contains 10 replies, has 5 voices, and was last updated by Peter Stoev 7 years, 11 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Tab key not working with one modal window with input Posts
September 30, 2016 at 1:07 pm Tab key not working with one modal window with input #87820
Roeland
Participant
The Tab key does not work if the page has a hidden modal window with an input. Below is a simple example. It is not possible to tab between the 2 inputs.

Besides setting { isModal: false }, does anybody have a workaround?
```
<html>
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" >
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#test1, #test2, #test3").jqxInput({ width: 100, height: 20 });
            $("#Popup").jqxWindow({ height:90, width: 150, isModal: true, autoOpen: false });
        });
    </script>
</head>
<body>
    <div id="Main">
        <input id="test1" />
        <input id="test2" />
    </div>

    <div id="Popup">
        <div>Header</div>
        <div>
            <input id="test3" />
        </div>
    </div>
</body>
</html>
```
October 2, 2016 at 11:15 am Tab key not working with one modal window with input #87835

Roli4711
Participant

I have the same issue but only since Version 4.2.1. But not only the key tab will not work properly (I have one window, in which it works), but also some Elements in this hidden dialog window will only be shows after losing the focus of the last field, which related to an element. And also the with of grid tables are not the same as before Version 4.2.x.

I think, with Version 4.2 a lot of things appears, which was not there before this version!

October 3, 2016 at 6:27 am Tab key not working with one modal window with input #87844

Hristo
Participant

Hello Roli4711,

Thank you for your feedback.
We will investigate this.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

October 5, 2016 at 5:40 am Tab key not working with one modal window with input #87910

Roli4711
Participant

Hi Hristo,

I think, I found the problem. 4.2.x must be used with jquery 3.x. I used jqwidets with 1.11.3 / 2.1.4 until now. With this versions, the problems described above arises. With jquery 3.x, I can use the tab without problems and also the length of the width in grid tables are now correct!

Regards,
Roland

October 6, 2016 at 6:56 am Tab key not working with one modal window with input #87954
Roeland
Participant
Using jquery 3 makes no difference. Tab key is still not working.
```
<html>
<head>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" >
    <script type="text/javascript" src="scripts/jquery-3.0.0.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxinput.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#test1, #test2").jqxInput({ width: 100, height: 20 });
            $("#test3").jqxInput({ width: 100, height: 20 });
            $("#Popup").jqxWindow({ height:90, width: 150, isModal: true, autoOpen: false });
        });
    </script>
</head>
<body>
    <div id="Main">
        <input type="text" tabindex="1" id="test1" />
        <input type="text" tabindex="2" id="test2" />
    </div>

    <div id="Popup">
        <div>Header</div>
        <div>
            <input type="text" tabindex="3" id="test3" />
        </div>
    </div>
</body>
</html>
```
October 14, 2016 at 8:39 am Tab key not working with one modal window with input #88190

Roli4711
Participant

Strange. 9 days after my post, I have the old problem with jquery 3.x and 4.2.1!

Why it works one time, why not?

October 14, 2016 at 9:35 am Tab key not working with one modal window with input #88195

Roli4711
Participant

Unfortunately, there is no announcement of a new version through email.

With Version 4.3.0, the problem is solved.

Roland

May 16, 2017 at 12:53 pm Tab key not working with one modal window with input #93636

taskmate
Participant

Sir

The same behaviour is noted in 4.5.2 version of jqxWindow.

a) If the window created is not modal then TAB KEY WORKS
b) If the version is revereted to 4.5.0 the tab key works
c) If on version 4.5.2 if the window is created as isModal : False opened and closed tab key works not change property to isModal :true. Tab stops working
d) On using jquery 3.x the problem persists

Regards

Sanjay Gupta

May 16, 2017 at 1:10 pm Tab key not working with one modal window with input #93637

Peter Stoev
Keymaster

Hi Sanjay Gupta,

The TAB behavior of modal and non-modal windows is different by design.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 16, 2017 at 3:25 pm Tab key not working with one modal window with input #93644

taskmate
Participant

Sir

Kindly correct me if I am wrong.

The behavior changes on the form. ie tab key stops working on the form / web page if a modal window is created or opened. That means that if the modal window is created on the form (not opened till now), the tab stops working.

That means that if we need to create a window on the page and use the tab key on the form then only option is to create a non modal window.

Regards

Sanjay

May 16, 2017 at 4:01 pm Tab key not working with one modal window with input #93647

Peter Stoev
Keymaster

Hi Sanjay Gupta,

I do not see any problem with tab key navigation in current version.

Best Regards,
Peter Stoev

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

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.