Material: mdSelect causes page to jump to top when clicked

[dozingcat]

See http://codepen.io/anon/pen/LEmgvE . Scroll down a bit, click the mdSelect to open it, and the page will scroll back to the top.

[ilanbiala]

I have this issue as well.

[chr22]

This is still an issue as of 0.8.3, but only in Firefox

[Oskar-Andersson]

I have this same issue, and I believe its because the page somehow ignores "scrollTop" when creating / drawing the option list, i.e. the displacement of the displayed option-list is related to the amount scrolled from document top. That's the root cause of this bug, and the browser scrolling behavior comes as a side effect of this...

I would try to fix this myself if I had the time, sadly I do not. Hopefully someone else can fix it fairly quickly, since its a rather severe and UX breaking bug for (as someoene else wrote) FF users!

[novashockinc]

This is still happening for me, has anyone tested out the 0.8.3 version and notice this has been resolved?

[Oskar-Andersson]

As chr22 wrote, yes it is still in 0.8.3 but apparently only in FF (which is what I use).

[ilanbiala]

I actually still have this issue on Chrome with 0.8.3 and it's been present for a few Chrome versions and a few ngMaterial versions.

[novashockinc]

Thanks @Oskar-Andersson and @ilanbiala hope to find a way around this.

[jl4282]

I'm using 0.8.3 and this is still an issue in Chrome 41.0.2272.89 (64-bit)

[ilanbiala]

Big bug that prevents mdSelect from really being usable. @ThomasBurleson @rschmukler @ajoslin any ideas what's going on?

[atsuya]

Same here with 0.8.3.

[mrmarktyy]

Same here ;( I am in Chrome Version 41.0.2272.89 (64-bit)

[atsuya]

i confirmed it's been fixed for me :cat: :zap:
thanks!

[utopiaio]

i've tested it on Safari, Chrome and Firefox (all latest releases) and it's working like a charm

@rschmukler thank you for all the work

[alifarahani]

Sorry Guys I've been having the same issue, should I wait for the next update?

Thanks

[novashockinc]

I am here with you on that @alifarahani I think we should just wait!

[alifarahani]

Thanks @Novashock ! ! !

[rschmukler]

@Novashock / @alifarahani are you running off of master or 0.8.3? It should be fixed, even though it hasn't been released yet.

[alifarahani]

@rschmukler I updated to 0.8.3 but is not fixed . . .

[rschmukler]

@alifarahani Yeah it was still in 0.8.3. But it will be fixed when we release next.

[alifarahani]

@rschmukler Thanks man keep up the good work ! ! !

[davecast]

i have the same issue with the 0.8.3 version. when this issue was settled?

[demisx]

Shall the milestone be updated for this issue? Obviously, this bug is still in 0.8.3.

[butaixianran]

Why close this issue??? It hasn't been fixed yet! Even in 0.9.4
check this:
http://codepen.io/butaixianran/pen/waWRmN

This issue is still in firefox 38+

After testing, I find out, this issue is fixed in 0.9.0, but it comes back in 0.9.4....

[devSamsane]

it's strange but this code works with firefox.

Favorite color: {{c}} You have selected {{selectedColor}}

{{c}}

I had the same issue on Chrome with a md-select in form (yesterday with the #master version). And it works for me too. Fixed height in a md-content tag. It's not "the" solution but you can go on until the great team fixe the issue ;).

[vs4vijay]

Its not even fixed in 0.10.0 version, Firefox has same issue but working in chrome.

[dozingcat]

The codepen demo is now working for me in Firefox, but my actual app still has the incorrect behavior. I'll try to create another reproduction.

[vs4vijay]

@dozingcat any update on this? Have you overcome this problem?

[g2graman]

Issue still present for Chrome version 43.0.2357.134 (64-bit)

[alarrosa14]

Happens to me with version 0.10.0 using mdAutocomplete in Firefox 39.0.

[alarrosa14]

Just to record that 0.10.1-rc3 fixed the issue for me.

[suederade]

Still happening to me in 1.0.2.

[jayeshanandani]

md-select still is resulting in jump of page in 1.0.2. Can reproduce.

[johhansantana]

Mine jumps to top and even makes the screen completely blank angular:[email protected]

[silberjan]

for me md-select is virtually unusable below the fold because of this (1.0.4)

[ajagnanan]

So this is still happening for me. Not sure whats wrong, but it seems that styles are being placed on the body tag, the culprit being "top" set to -x value. This provides a workaround for now:

// Save mouse positions so we have them globally
$(document).mousemove(function(e) {
    window.x = e.pageX;
    window.y = e.pageY;
});

// Function needs to be placed on the md-select "md-on-open"
$rootScope.fixPosition = function(){
            $timeout(function(){
                $('body').removeAttr('style');
                if (document.getElementsByClassName('md-active')) {
                    for (var i = 0; i < document.getElementsByClassName('md-active').length; i++) {
                        var ele = document.getElementsByClassName('md-active')[i];
                        if (ele.localName == 'div') {
                            var position = y - ele.clientHeight;
                            ele.style.top = position + "px";
                        }
                    }
                }
            }, 10);
        };

[blankazucenalg]

Version 1.1.4 still causes this even with Chrome.
Version 1.1.1 works fine with both Chrome and Firefox

[cesardmoro]

having the same issue

[gvorster]

In FF 57.0 I and Chrome 62.0 can see an md-select inside a dialog, but cannot close it anymore.

[shwethachavdi]

body {
    position: initial !important;
    top: initial !important;
    overflow: initial !important;
}
html {
    overflow: initial !important;
}

worked for me.

[Splaktar]

If you are still seeing this or a similar issue, please open a new issue with a CodePen reproduction using 1.1.9.