Chrome vs Firefox : jQuery faceoff (how range selection behaves differently in these 2 browsers)

Hello Buddies.

Long time since last post.

I want to share an interesting scenario I encountered few days back related to UI.

Scenario –

There are 2 multiple select boxes available on the JSP, in such a way that you can filter the data from the first one, using one regex, select a range of filtered out options and push them towards the second one.

Seems easy in the first shot. Isn’t it?

I used jQuery for this and implemented it, for some POC, as follows -

https://github.com/namitsharma99/multi-selectbox-browser-specific/blob/master/test.jsp

So what we have in the first select box is -

'ABC intDEF',

'XYZ intABC',

'qwerty',

'abcdefgh',

'blah blah intDUMMY',

'blah blah hello',

'hello int'

I need to filter only those values having ‘int’, by hiding the non-matching ones.

Now the box would be showing -

'ABC intDEF',

'XYZ intABC',

'blah blah intDUMMY',

'hello int'

Shift + select End-To-End and append in the second box.

So far, looks good.

Try this code in Chrome, it will look perfect.

But now comes the interesting part, try in Mozilla Firefox, and inspect the second box.

“BOOM”

All those values that were hidden due to filter in the first box, have also been included if present within the range. What it can lead to is the angry set of users who prefer Firefox. :P

Clearly, Chrome is able to understand not to include hidden options, while Firefox fails here, and being a browser issue, it becomes difficult to comprehend.

What can be done?

A neat and clean work-around!

function pushSelectedToRight(pushObj) {

pushObj = $(pushObj);

var leftBox = $("#tempLeft");

var rightBox = $("#tempRight");

if(leftBox.find("option:selected").length > 0){

var tmp = leftBox.find("option:selected");

tmp.each(function() {

        if($(this).css("display")=="block"){

    rightBox.append($(this));

    }

    });

  rightBox.find("option").removeAttr("selected");

}

else{

alert("Please select atleast one item to move");

}

}

Speaking in terms of jQuery, it selects out the values using selected flag - leftBox.find("option:selected")

Apart from this better use ‘each’ method as well for checking the visible elements.

It won’t cause any issue on the Chrome side, but will also work for Firefox -

var tmp = leftBox.find("option:selected");

tmp.each(function() {

        if($(this).css("display")=="block"){

    rightBox.append($(this));

    }

    });

And this is how a day is saved!

Happy Coding!!