Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Selector plugin gets confused on IE9 and IE10 #733

Closed
bobbylight opened this issue Sep 25, 2013 · 5 comments
Closed

Selector plugin gets confused on IE9 and IE10 #733

bobbylight opened this issue Sep 25, 2013 · 5 comments

Comments

@bobbylight
Copy link

It seems you can confuse a checkbox selector, and get it out of sync with the actual Grid selection, in IE9 and 10. I cannot reproduce this in IE11 RC, Chrome, Firefox, or Opera.

Below is a relatively simple test case. There are some JSP scriptlets in there that allowed me to test with different dgrid versions via a query parameter. It appears that this bug occurs in dgrid 0.3.2 all the way through 0.3.10.

Note that the bug doesn't always occur with the same steps, but you get it by fiddling with the "select all" and individual checkboxes of the selection column, and clicking one of the hyperlinks in the process. For example:

  1. Select all via the "select all" check box.
  2. Click on one of the links in the grid.
  3. Try to uncheck one or two of the rows by clicking in the checkbox directly.
  4. You'll know you've hit the problem if you click a checkbox, but it doesn't visually change to the "unchecked" state.
  5. Click the "select all" again to uncheck it. All of the individual check boxes are now out of sync with it. When it's checked, they're unchecked, and vice versa.

Again, sometimes this workflow doesn't cause the bug, but if it doesn't, just check and uncheck stuff a few times, clicking on the link in between. You'll get it within 5 or so attempts.

<!doctype html>
<html>

<head>
   <%
      String dgridVer = request.getParameter("dgridVer");
      if (dgridVer==null) { dgridVer = "0.3.6"; }
   %>
   <script type="text/javascript">
      var dojoConfig = {
         isDebug: true,
         baseUrl: 'dojo',
         packages: [
            { name: 'dojo',     location: 'dojo' },
            { name: 'dijit',    location: 'dijit' },
            { name: 'dojox',    location: 'dojox' },
            { name: 'dgrid',    location: 'dgrid-<%=dgridVer%>' },
            { name: 'put-selector',    location: 'put-selector' },
            { name: 'xstyle',   location: 'xstyle' }
         ]
      };
   </script>
   <script src="dojo/dojo/dojo.js"></script>

</head>

<body>

   Using dgrid version: <%=dgridVer %><p>

   <div id='gridDiv'></div>
   <script type='text/javascript'>
      require(['dgrid/Grid', 'dgrid/extensions/Pagination', 'dojo/store/JsonRest',
               'dgrid/selector', 'dgrid/Selection', 
               'dojo/store/Cache', 'dojo/store/Memory', 'dojo/_base/declare', 'dojo/domReady!'], 
         function(Grid, Pagination, JsonRest,
                  selector, Selection,
                  Cache, Memory, declare) {

         var data = [
            { id: 1, first: "Charles", last:  "Barkley", age:  50 },
            { id: 2, first: "Jim",     last:  "Carey",   age:  51 },
            { id: 3, first: "Jimbo",   last:  "Jones",   age:  14 },
            { id: 4, first: "Bob",     last:  "Barker",  age:  89 },
            { id: 5, first: "Vanna",   last:  "White",   age:  55 },
            { id: 6, first: "Pat",     last:  "Sajak",   age:  65 }
         ];
         var columns = [
            selector({ field: 'checkboxes', selectorType: 'checkbox' }),
            { field: 'first', label: 'First Name', renderCell: function(rowData, data, node) {
                  node.innerHTML = '<a href=\'javascript:alert("hi");\'>' + data + '</a>';
               }
            },
            { field: 'last',  label: 'Last Name' },
            { field: 'age',   label: 'age' }
         ];

         var store = Memory({ data: data, idProperty: 'id' });

         var grid = new (declare([Grid, Pagination, Selection]))({
            selectionMode: 'multiple',
            allowSelectAll: true,
            deselectOnRefresh: true,
            columns: columns,
            store: store,
            rowsPerPage: 1000
         }, 'gridDiv');

         var listener = function(e) {
            var values = [];
            for (var id in e.grid.selection) {
               // selection value may be "false" if using "select all" checkbox and individual checkboxes
               if (e.grid.selection[id]) {
                  var rowData = grid.row(id);
                  values.push(rowData.data['first']);
               }
            }
            console.log(e.type + ' (' + values.join() + '): ' + new Date());
         };
         grid.on('dgrid-select', listener);
         grid.on('dgrid-deselect', listener);

      });

   </script>

</body>

</html>
@kfranqueiro
Copy link
Member

IE9 and 10 have a bug where clicking a link that does not preventDefault but also does not navigate to another page or anchor can do some pretty crazy things to event listeners, making them fire for the wrong events. I bet that's what you're running into here. If this isn't happening in IE11, that's a great sign. I forgot whether they had fixed it at some point but it sounds like maybe they have.

We ran into the same thing in another issue several months back: #379 (comment)

@bobbylight
Copy link
Author

You're right, you're describing exactly the problem we're seeing. We also saw event listeners get hosed, resulting in much worse errors than just incorrectly-denoted selections. That test case just seemed to be the simplest example.

We actually ended up finding a workaround similar to what you mention (we used e.preventDefault() and used a listener to execute our JS as opposed to inlining it in an href). But I didn't know if that was the best solution, and felt more like a band-aid than a real fix. Good to see some confirmation that it's indeed a browser bug! :)

FWIW, this does appear to be resolved in IE11.

I'll take the liberty of closing this out since it's effectively a duplicate.

@bobbylight
Copy link
Author

Is there documentation of this bug in IE somewhere? I'm not really a Microsoft guy, but I tried looking in Connect and MSDN in general, in addition to the typical Google search, but didn't come up with anything.

@kfranqueiro
Copy link
Member

I never found anything other than http://social.msdn.microsoft.com/Forums/ie/en-US/99665041-557a-4c5f-81d8-a24230ecd67f/ie10-dispatchevent-calls-wrong-listeners (which, by fun coincidence, was posted by another Dojo committer). If there is an official bug somewhere I'm not aware of it.

@csnover
Copy link
Member

csnover commented Oct 10, 2013

Circuitous, but there is a bug report at https://connect.microsoft.com/IE/feedback/details/802397/ie9-ie10-events-can-be-sent-to-the-wrong-listeners

@kfranqueiro kfranqueiro mentioned this issue Jan 24, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@csnover @kfranqueiro @bobbylight