Scroll-wheel friendly select dropdown/combobox

16 Sep 2004 - 7:13am
10 years ago
1 reply
986 reads
Dave Malouf
2005

I realize that the select dropdown version of a listbox (or a combo-box if
you can edit it as well) has been around for a very very very long time.
Scroll-wheel mice now are at least 7 years old in mass-production so you
would think in that time the selectbox/combobox would have been changed to
have some new behaviors to match the needs of a the almost ubiquitous
(outside Mac) use of a scroll-wheel mouse.

What's the problem you might add. Well ... it has to do with the way a
combobox retains its focs after onChange. I realize it has to do this in a
world where you can use the keyboard to make a selection by typing ahead "U"
to get closer to "United States", for example. Or just using the arrow key
b/c you know your selection is not that far away. If we blurred onChange
that would be bad.

What is also bad is if you are a mouse user and you use a combobox, the
standard behavior that I have seen from new users especially on longish
forms is to open combobox (create focus) use scrollwheel to find selection
(NOT use the scrollbar itself and seldom use the keyboard); once found click
selection and then try to re-center the next field by using the
scroll-wheel. But what happens is that the page doesn't scroll b/c the focus
of the form is still on that combobox so the scrollwheel is changing the
selected value. This is VERY bad if the selectbox has an onChange function
of some kind.

Has anyone come up with a design to mitigate this issue? What would be an
ideal behavior for a list like this that doesn't support any metadata? Are
we forced to use "radio buttons" (single select) or "checkboxes"
(multiselect) in a scrollable widget of our own? Can this be done with the
"blind" type ahead function when you are working with a list of 200 options
like a country list or a date selector?

Thoughts?

-- dave

Comments

16 Sep 2004 - 1:26pm
Svoboda, Eric
2004

This has come up for us a few times here on long (scrolling) forms. The
best I've been able to come up with is some variation on the following
(works in IE):

<form>
<select onchange="document.forms [0].fieldName.focus();">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input name="fieldName" type="text"></input>
</form>
</body>

It's ugly! If you use the list by clicking on the "down arrow" button
and then making your selection, all is well. But if you try to use it by
clicking on the field area, your very first scroll-move will (of course)
fire the event and move focus. NOT a good thing at all. I've
experimented with events other than "onchange", but it seems to be the
best. The "onmouseleave" event would be perfect if it worked the way it
should. Unfortunately it uses the boundary of the 'closed' state of the
list instead of the 'open' state, which makes it useless for this
application. Maybe a function could be written using several events - a
'combination event' - to trigger focus change. Dunno.

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com] On Behalf Of David Heller
Sent: Thursday, September 16, 2004 7:14 AM
To: 'Interaction Designers'
Subject: [ID Discuss] Scroll-wheel friendly select dropdown/combobox

<snip>
What is also bad is if you are a mouse user and you use a combobox, the
standard behavior that I have seen from new users especially on longish
forms is to open combobox (create focus) use scrollwheel to find
selection (NOT use the scrollbar itself and seldom use the keyboard);
once found click selection and then try to re-center the next field by
using the scroll-wheel. But what happens is that the page doesn't scroll
b/c the focus of the form is still on that combobox so the scrollwheel
is changing the selected value. This is VERY bad if the selectbox has an
onChange function of some kind.
</snip>

Thoughts?

-- dave
_______________________________________________
Interaction Design Discussion List
discuss at ixdg.org
--
to change your options (unsubscribe or set digest):
http://discuss.ixdg.org/
--
Questions: lists at ixdg.org
--
Announcement Online List (discussion list members get announcements
already) http://subscribe-announce.ixdg.org/
--
http://ixdg.org/

Confidentiality Warning: This e-mail contains information intended only for the use of the individual or entity named above. If the reader of this e-mail is not the intended recipient or the employee or agent responsible for delivering it to the intended recipient, any dissemination, publication or copying of this e-mail is strictly prohibited. The sender does not accept any responsibility for any loss, disruption or damage to your data or computer system that may occur while using data contained in, or transmitted with, this e-mail. If you have received this e-mail in error, please immediately notify us by return e-mail. Thank you.

Syndicate content Get the feed