search

free-jqgrid / jqGrid

jQuery grid plugin
https://github.com/free-jqgrid/jqGrid
Other
480 stars 195 forks source link

jQuery 3.5.1 causes issue with column chooser #500

Open rbruhn opened 4 years ago

rbruhn commented 4 years ago

I've created two JsFiddles to display this issue.

  1. https://jsfiddle.net/rbruhn/zo8ancqm/ jQuery 3.5.1
  2. https://jsfiddle.net/rbruhn/uasxkd7L/ jQuery 3.4.1

As can be seen when using column chooser, the text is displayed in 3.4.1 but not 3.5.1. It seems the jQuery is overriding something but I can't figure it out. Any ideas?

tyddynonn commented 3 years ago

This is caused by a change in jQuery htmlPrefilter. The workaround at https://jquery.com/upgrade-guide/3.5/ fixes the problem. If I can identify a change in the jqGrid source that fixes this I'll post here.

Note: I think the issue is most likely in the multiselect widget https://github.com/michael/multiselect

tyddynonn commented 3 years ago

So, sorted.

The problem is in the multiselect widget. It treats <span> tags as self-closing when under latest specs they are not. So in 'ui.multiselect.js' at around line 160ish in function _getOptionNode, change

var node = $('<li class="ui-state-default ui-element" title="'+option.text()+'" data-selected-value="' + option.val() + '"><span class="ui-icon"/>'+option.text()+'<a href="#" class="action"><span class="ui-corner-all ui-icon"/></a></li>').hide();

to

var node = $('<li class="ui-state-default ui-element" title="' + option.text() + '" data-selected-value="' + option.val() + '"><span class="ui-icon"></span>' + option.text() + '<a href="#" class="action"><span class="ui-corner-all ui-icon"></span></a></li>').hide();

There's already a PR addressing this in the multiselect repo: see https://github.com/michael/multiselect/pull/172/commits/ebcc76fa0373c1652512af1fafc92e15f694b80a

but I found that didn't work for me