Materialize: Select list dropdown scrollbar closes the dropdown.

[MattgyverHub]

I have a select list of US states which requires a scrollbar to limit the items shown to 7 or so. However, using the scrollbar immediately closes the droplist. The folks at the Angular/material git have a fix, but I don't understand how to implement it for the select list dropdown. Thanks in advance! https://github.com/angular/material/issues/1739 The following is exactly what's happening:

[Dogfalo]

The scrollbar on dropdowns worked for me on Chrome + OSX. What browser/OS are you on?

[MattgyverHub]

Chrome on Windows 7 with the latest release build of Materialize v0.95.3. I set the height on the list to 200px, and made sure the overflow was on auto. Perhaps there is a better way to display the scrollbar by limiting the list items shown, instead of using a css height?

[Dahkon]

Same problem for me.
It happend on all browser.

The problem is located here :
$newSelect.on('blur', function(){
$(this).trigger('close');
});

The blur event is fired once we click on the scrollbar.

[emurselovic]

Is this issue resolved?

If it is resolved where i can find solution.

[Pat-Paran]

I did this and it works Fine

// $newSelect.on('blur', function(){
// // $(this).trigger('close');
//
// });
$('.select-dropdown').find('span').on('click',function(){
$newSelect.trigger('close');
});

Comment out the on blur after that every click of options will get the value and close the dropdown.

[Pat-Paran]

if you want to exit the dropdown when you click outside Use this.
$(document).mouseup(function (e)
{
var container = $(".select-dropdown");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
           $newSelect.trigger('close');
        }
    });

[emurselovic]

Thank you very much. It is working as expected.

[chi-bd]

Only to add the following '+' code after $('select').material_select(), without any patch to materialize.js.
(refer to https://code.google.com/p/chromium/issues/detail?id=51469)

  $(document).ready(function() {
    $('select').material_select();

+    var onMouseDown = function(e) {
+      // preventing the default still allows the scroll, but blocks the blur.
+      // We're inside the scrollbar if the clientX is >= the clientWidth.
+      if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
+        e.preventDefault();
+      }
+    };
+    //$newSelect.on('mousedown', onMouseDown);
+    $(’select').siblings('input.select-dropdown').on('mousedown', onMouseDown);
  });

[chi-bd]

My PR was rejected because of the following reason.

but introduces another because now the select no longer closes when you normally click on an item.

Such problem doesn't occur on my environment.
When I click on an item normally, the selectbox is closed automatically, that is a correct operation.
I tested InternetExplorer 11.0.9600.17937 and Chrome 47.0.2526.73m on Windows8.1 and Windows7.

Could anyone help me to test this additionally?

[blinchi]

Hi chi-bd, I test your solution

$(document).ready(function() {
$('select').material_select();

• var onMouseDown = function(e) {
• // preventing the default still allows the scroll, but blocks the blur.
• // We're inside the scrollbar if the clientX is >= the clientWidth.
• if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
• e.preventDefault();
• }
• };
• //$newSelect.on('mousedown', onMouseDown);
• $(’select').siblings('input.select-dropdown').on('mousedown', onMouseDown);
  });

and not work for me on IE 10, because after select an item select not close automatically. Without your solution after you select an item the select close auto.
Sorry for my english.

[chi-bd]

Dear blinchi, thanks for testing.

not work for me on IE 10, because after select an item select not close automatically.

I can't reproduce it for lack of IE10 environment, but I probably found a way to close forcibly.
Please test the following workaround, additionally.

- $('select').material_select();
+ $('select').material_select(function() {
+     $('input.select-dropdown').trigger('close');
+ });

material_select() can be received the callback function as an argument, and it calls when the item has selected.
so, executing "trigger('close')" in the callback cause to close forcibly, I think.

[sly7-7]

We have the same issue, but only on IE (at least 10 & 11).

@chi-bd Thanks for the workarounds, combining both seems to works as expected.

$(document).ready(function() {
    $('select').material_select(function() {
     $('input.select-dropdown').trigger('close');
   });

    var onMouseDown = function(e) {
      // preventing the default still allows the scroll, but blocks the blur.
      // We're inside the scrollbar if the clientX is >= the clientWidth.
      if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
        e.preventDefault();
      }
    };
    $(’select').siblings('input.select-dropdown').on('mousedown', onMouseDown);
  }); 

[blinchi]

@sly7-7 ouhhh yeahhh your code Works perfect!

[jpt007]

@sly7-7 - Looks like if you have more than one select list vertically, opening the drop down below and then opening the one above causes layering issues with both dropdowns. Didn't know if you experienced this issue and potential workarounds.

update:
I added a trigger to close any other select lists that are not the originator of the mouse down event and initial tests appear to have worked. Code for onMouseDown:

var onMouseDown = function(e) {
    // added to trigger all other select lists to close
    $("input[data-activates!='" + $(this).attr('data-activates') + "'].select-dropdown").trigger('close');

    // preventing the default still allows the scroll, but blocks the blur.
    // We're inside the scrollbar if the clientX is >= the clientWidth.
    if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
         e.preventDefault();
    }
};

[kpingel]

@sly7-7 -- Your fix worked, but makes it so that you can no longer begin typing to jump to a specific dropdown option. :( Thoughts?

[maiconsansonrc]

On mobile does not work at all! Any thoughts?

[tdotholla]

I have a dropdown that dissapears when clicked on mobile as well..
i 'tap' and hold in order to scroll down the dropdown, the tap-n-hold is registered as a click, but the list item (href) isn't navigated to either...
like i have to tap it suuuuper light in order to get to the link item in the dropdown.
no scrolling works on mobile, because the tap is registered as some type of click, and dropdown dissapears before i release the tap.

[acburst]

This was fixed in 1d941102292f154fc2bd78eefb6fadf1f0649b2e

[jaylegere]

After upgrading to 0.98.1, I am still seeing this issue in IE 11 (11.0.9600.18617) on Windows 7. It works fine in Chrome (57.0.2987.110).

[kevzlou7979]

Hi there,

I found a workaround for mobile devices.
We used Materialize on Java Web Application also know as GWT
Check it out : http://gwtmaterialdesign.github.io/gwt-material-demo/

var onMouseDown = function(e) {
    // added to trigger all other select lists to close
    $("input[data-activates!='" + $(this).attr('data-activates') + "'].select-dropdown").trigger('close');

    // preventing the default still allows the scroll, but blocks the blur.
    // We're inside the scrollbar if the clientX is >= the clientWidth.
    if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
        // Apply only on non-touch screen devices.
        if('ontouchstart' in document.documentElement) {
              e.preventDefault();
        }
    }
};

[tdotholla]

Interesting solution; does this take into account a regular scroll wheel
when inside the element instead of when my cursor is inside of the
scrollbar?
On Thu, Apr 20, 2017 at 7:57 AM kevzlou7979 [e-mail]
wrote:

Hi there,

I found a workaround for mobile devices.
We used Materialize on Java Web Application also know as GWT
Check it out : http://gwtmaterialdesign.github.io/gwt-material-demo/

var onMouseDown = function(e) {
// added to trigger all other select lists to close
$("input[data-activates!='" + $(this).attr('data-activates') + "'].select-dropdown").trigger('close');

// preventing the default still allows the scroll, but blocks the blur.
// We're inside the scrollbar if the clientX is >= the clientWidth.
if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
    // Apply only on non-touch screen devices.
    if('ontouchstart' in document.documentElement) {
          e.preventDefault();
    }
}

};

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/Dogfalo/materialize/issues/901#issuecomment-295705343,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA6Tha4QSNcnhh-7-R21IMs1NYA_mUa4ks5rx0ghgaJpZM4DtwPX
.

[kevzlou7979]

@tdotholla Yeah both Scroll wheel and cursor is working fine

[RenaldasK]

The issue is still present in IE11. I'm using v0.98.0

[pdlk]

Version 0.100.1, issue remains (IE10, IE11)

[cpalmerbright]

Is there any chance of a solution for this? Still a problem in IE11

[Fasani]

@cpalmerbright I also have this problem in IE11, did you find a fix?

[Fasani]

It would appear that IE fire's a blur event that other browsers do not fire on click of the scroll bar.

Search for this function:
$.fn.material_select = function(callback) {

Notice this line:
$newSelect.on("blur", function() {

This is the event that is closing the drop-down in IE.

We fixed this behaviour using this code:
$newSelect.on("blur", function() {
var that = this;

$(this).find(' ~ .dropdown-content span').off('click');
$(this).find(' ~ .dropdown-content span').on('click', function() {
$(that).trigger('close');
});

var containers = $(".select-dropdown");
if (!multiple && !containers.is(e.target)) {
$(this).trigger("close");
}

options.find("li.selected").removeClass("selected");
});

This needs further testing I guess to ensure that it doesn't have any unwanted side effects but initially, this seems to fix the issue.

[Dogfalo]

We have a fix coming for this in v1 with a reworked select that does not rely on focus

[ijabit]

Any ETA on V1?

[worthy7]

@Fasani unfortunately ugly solution, but it's better than nothing. Anyone got any news on this?
I have just encountered this in our system (lots of IE11 users) whilst using Typeahead.js

[brahmaui]

@sly7-7 It is not working in Safari.
I have used PHP Laravel can anyone help me.

this is the code

<div class="input-field">
                                    <select id="category" name="category" class="validate">
                                        <option value="" disabled> Select Category </option>

                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                    </select>
                                    <label for="category">Cause Categories</label>
                                </div>

<script>
$(document).ready(function() {
    $('select').material_select(function() {
     $('input.select-dropdown').trigger('close');
   });

    var onMouseDown = function(e) {
      if (e.clientX >= e.target.clientWidth || e.clientY >= e.target.clientHeight) {
        e.preventDefault();
      }
    };
    $(’select').siblings('input.select-dropdown').on('mousedown', onMouseDown);
  }); 
</script>

[frostless]

Many above methods work, but if we do e.preventDefault(); then we lose the browser typing context ability. I mean if you type a letter, the select wont go to the item anymore, any workaround with this?

[hari457627]

Hi i'm using Downshift material ui component.
scroll bar up and down arrows with mouse clicks is working fine in normal pages,
but its not working in material ui modals.
in modal, when i'm clicking in Downshift suggestions scroll up and right arrow with mouse, then suggestions popup is closing.
Can anybody help me to solve this issue?