Multiple Select Scrolling to select entry
See original GitHub issueHi 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
Issue Analytics
- State:
- Created 7 years ago
- Reactions:3
- Comments:12 (8 by maintainers)
If you want to avoid this behavior, you have to delete the line 3280 in materialize.js :
options.scrollTo(option);
This action is really annoying. It should be removed.