How to disable the drag selection on multi select without losing the selection color?

Question

I created a multiple select list box using the select tag as shown in the code below in Angular 5.

<select multiple id="MySelect">
      <option>I am Option 1</option>
      <option>I am Option 2</option>
      <option>I am Option 3</option>
      <option>I am Option 4</option>
      <option>I am Option 5</option>
      <option>I am Option 6</option>
      <option>I am Option 7</option>
      <option>I am Option 8</option>
      <option>I am Option 9</option>
    </select>

Now, the problem is that I can drag the mouse over the select box without selecting any option in actual as it will look like the image below.

From this image, one can conclude that all the first three options are selected in this list box but this is not the case in actual. To remove this dragging functionality, I added the preventDefault() function on mousedown and mousemove events as mentioned here.

Adding preventDefault() fixed this problem, but arised another problem. The problem was that on selecting one or more options in the list box, the background color of the selected option was gray instead of the default blue and when I inspected it in Chrome, it showed:

select:-internal-list-box option:checked {
    background-color: -internal-inactive-list-box-selection;
    color: -internal-inactive-list-box-selection-text;
}

To override this color, I used the !important along with the color-name but it was of no use.

Can someone please tell me what is the effective way to fix this problem in such a way that dragging selection will be disabled and the selected item's color will be blue? In case, if it is not possible, then can anyone please tell me an alternative component to use instead of this in Angular?

The greying is specific to user-agent, dont think it possible to control it via overriding them in your style sheet.You might have to use custom components, like https://material.angular.io/components/select/overview#multiple-selection — Thirueswaran Rajagopalan, Mar 08 '18 at 08:07
@ThirueswaranRajagopalan, but that's not what I want. I want the items to be displayed as list group and not like the dropdown list launched by clicking on the select button — KhiladiBhaiyya, Mar 08 '18 at 08:26
There are many select plugins for angular, like ng-select try them and see ... — Thirueswaran Rajagopalan, Mar 08 '18 at 12:25
Maybe a jsfiddle with your current trial (js and css included) will help us understand what's your problem? Currently your snippet only have the initial html element. — cytsunny, Mar 12 '18 at 09:19
In your question, you say: "I can drag the mouse over the select box without selecting any option in actual". That sounds incorrect to me. I think that, when dragging, you are actually selecting the options. What you want is to disable that selection method, and force the user to select by clicking. Am I right? — ConnorsFan, Mar 13 '18 at 15:00
I'm not sure that this is what you trying to achieve. See fiddle: https://jsfiddle.net/7a5nrkrq/11/ — Vitalii Chmovzh, Mar 16 '18 at 19:27
@ConnorsFan, yes you are partially correct I think. I actually wanted the multiple selection functionality but just want to disable the situation when on dragging over the options using mousedown, mousemove and finally mouseup event, the background color changes to blue which looks like as the options have been selected but in actual, they are not. — KhiladiBhaiyya, Mar 17 '18 at 03:52
@VitaliiChmovzh, your solution is quite good but I don't want to disable the multiselection functionality — KhiladiBhaiyya, Mar 17 '18 at 03:52

score 8 · Answer 1 · edited Mar 17 '18 at 23:15

@DG after going through all your Scenarios what you need is to add the CSS to the particular component it self as you didn't provided me with any code , I'm giving the CSS applied to HTML elements.

In my solution I didn't explaining to prevent the multiple select as you already achieved it , I'm focusing on the second part of your problem.

CSS :

select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    background: linear-gradient(#f48024,#f48024);
    background-color: #f48024 !important; /* for Internet exolorer */
}

DEMO

select option:hover, 
select option:focus, 
select option:active, 
select option:checked
{
    background: linear-gradient(#f48024,#f48024);
    background-color: #f48024 !important; /* for Internet exolorer */
}

<select multiple id="MySelect">
    <option>I am Option 1</option>
    <option>I am Option 2</option>
    <option>I am Option 3</option>
    <option>I am Option 4</option>
    <option>I am Option 5</option>
    <option>I am Option 6</option>
    <option>I am Option 7</option>
    <option>I am Option 8</option>
    <option>I am Option 9</option>
</select>

score 1 · Answer 2 · edited Mar 18 '18 at 00:52

1

You need to track the mouseup only after there was a mousedown and a mousemove actions. This will be triggered only for a drag therefore allowing also multiple selections.

Snippet Here: https://jsfiddle.net/omartanti/nm8d52ku/

var isDragging = false;
var select = $('#MySelect');

select.mousedown(function() {
    isDragging = false;
}).mousemove(function() {
    isDragging = true;
}).mouseup(function(e) {
    var wasDragging = isDragging;

    isDragging = false;
    if (wasDragging) {
        e.preventDefault();
        var selected = select.find('option:selected');
        var values = Array.from(selected).map((el) => el.value);
        select.val(values[values.length - 1]);
    }
});

edited Mar 18 '18 at 00:52

HDJEMAI

9,436
46
67
93

answered Mar 17 '18 at 09:29

Omar Tanti

1,368
1
14
29

Thanks, but this snippet will not work for me perfectly because I need multiple selection functionality, I don't want to disable it. I just want to disable the dragging functionality – KhiladiBhaiyya Mar 17 '18 at 09:57
You can still have multiple selection with this when you press the cmd button and click on different options. – Omar Tanti Mar 17 '18 at 10:00

How to disable the drag selection on multi select without losing the selection color?

2 Answers2