Materialize: Multiple Select Scrolling to select entry

[ev5unleash]

Hi there,

I seem to be having an issue with the multiple select form element. When you select an element on the list, the scrollbar will jump to make the selection at the top of your view. This is frustrating for the user as the list will keep jumping around when the user selects an element. This issue only occurs on the last occurrence of a select multiple form element where all of the others are unaffected. Code example is below:

<div class="input-field col s12"><!-- This form element will be unaffected, not jumping around. --> <select multiple> <option value="" disabled selected>Choose your option</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> <option value="7">Option 7</option> <option value="8">Option 8</option> <option value="9">Option 9</option> <option value="9">Option 10</option> <option value="9">Option 11</option> <option value="9">Option 12</option> <option value="9">Option 13</option> <option value="9">Option 14</option> </select> <label>Materialize Multiple Select</label> </div>

                <div class="input-field col s12"> <!-- This element will jump around as the user select options from the list -->
                    <select multiple>
                        <option value="" disabled selected>Choose your option</option>
                        <option value="1">Option 1</option>
                        <option value="2">Option 2</option>
                        <option value="3">Option 3</option>
                        <option value="4">Option 4</option>
                        <option value="5">Option 5</option>
                        <option value="6">Option 6</option>
                        <option value="7">Option 7</option>
                        <option value="8">Option 8</option>
                        <option value="9">Option 9</option>
                        <option value="9">Option 10</option>
                        <option value="9">Option 11</option>
                        <option value="9">Option 12</option>
                        <option value="9">Option 13</option>
                        <option value="9">Option 14</option>
                    </select>
                    <label>Materialize Multiple Select</label>
                </div>

`

Thanks,
Evan

[kmmbvnr]

Yep, i have that problem too,

here is the codepen demonstrates it - http://codepen.io/kmmbvnr/pen/wWQwBm

[Tim-arts]

I don't have any issue on my side (Chrome, FF, Opera). What is the browser you're using ?

[kmmbvnr]

Here is the video recorded on Chrome 52 on Linux - https://drive.google.com/file/d/0B0IOM1qWdAnHdGtULWthUjJjSmM/view?usp=sharing

And I have same under FF 47

[Tim-arts]

Thank for the video. It's not a problem, this behavior (automatically scroll to the element) is wanted.

[kmmbvnr]

Mm, from my point of view - this behavior is very confusing. I never saw such things elsewhere.

Is there any way to disable scrolling selected element?

[Tim-arts]

If you want to avoid this behavior, you have to delete the line 3280 in materialize.js :
options.scrollTo(option);

[ev5unleash]

Regardless of it being a feature or not, it's not working properly. It only applies to the last multiple select on page, thus it being considered a bug. With that being said, it would also be nice to have a switch of some sort to turn off this behavior because I agree with @kmmbvnr, it's super confusing to users.

[Tim-arts]

I just enumerate the fact without having a point of view on the question. May be they had some reasons we don't know to do that, but I can't see which ones.

[kmmbvnr]

Looks like the reason is to show pre-selected option in opened dropbown. See demos here - #2601

May be we could perform scroll to first selected option on beforeOpen instead. No reason to do the scrolling on select - if the option was selected by user, it's already visible.

[Cerealkillerway]

deleting line 3280 solves this; I agree with @kmmbvnr about this behavior being very confusing

[acburst]

Fixed in e3668e36ad2c82f6520406cdb1a971c1a69d4f79

[dkatoLSVT]

This action is really annoying. It should be removed.