SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select Element behavior in Chrome

    When I click the select element, as expected, I get the dropdown of options (in my case, a list of names). When I type a letter, it will as expected, scroll down to the first name that begins with that letter, but it will also put that name into the select field even tho it has not been selected yet. If you click on the field(not on the option in the dropdown, it leaves the name in the field (instead of a blank or the value that was already in the field), but does not cause the onchange event to occur. This is problematic and can be confusing to users. The onchange event triggers a JavaScript function that fills out a div on the page (using an ajax call to the DB).
    Any help or a workaround suggestion would be appreciated.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dloughli View Post
    If you click on the field(not on the option in the dropdown, it leaves the name in the field (instead of a blank or the value that was already in the field), but does not cause the onchange event to occur.
    I find that when you click on the field, that it collapses the select option with the value that the keyboard selected. When you click on something else though or when you tab away, it goes back to the original unchanged value that there was before. So no change actually occurs when the list of options is collapsed.

    However, when you press a character to select something and then press tab, then the onchange event occurs.

    The problem occurs when someone presses a character to pre-select something and then manually collapses then list of options, right? It is expected for the onchange event to not occur when that happens.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    I find that when you click on the field, that it collapses the select option with the value that the keyboard selected. When you click on something else though or when you tab away, it goes back to the original unchanged value that there was before. So no change actually occurs when the list of options is collapsed.

    However, when you press a character to select something and then press tab, then the onchange event occurs.

    The problem occurs when someone presses a character to pre-select something and then manually collapses then list of options, right? It is expected for the onchange event to not occur when that happens.
    that is exactly what happens. The confusing part is that the user, when she clicks on the field, can think that they have in fact selected that value, and the div that normally gets replaced with different info with the onchange event, does not represent the info for the name that the user thought they have selected. Thanks for the reply, hopefully I can figure out a work around for this issue with google
    Last edited by DaveMaxwell; Jun 3, 2013 at 05:33. Reason: combined two posts into one..

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dloughli View Post
    Hopefully I can figure out a work around for this issue with google[/FONT][/COLOR]
    The workaround is for the user to realise that closing the select list without choosing an option from the list, results in no option being selected. It's a useful UI element that allows you to not select something if you don't want to.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the confusion comes from the fact, that the value in the element has changed, even though selection has not been made. Since few users are web developers, they would naturally think that they have selected a new value.

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,862
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by dloughli View Post
    I think the confusion comes from the fact, that the value in the element has changed, even though selection has not been made. Since few users are web developers, they would naturally think that they have selected a new value.
    The value displayed on the single visible line has changed. The value selected has not changed. You will probably find that the selected entry if there is one is still highlighted if you expand the list out again and that the entry howing when the list is not expanded is NOT highlighted because it isn't selected.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  7. #7
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Am I the only one who thinks that is lousy design, to put a value in a field, even though you have not selected it? What value does that serve?

  8. #8
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dloughli View Post
    Am I the only one who thinks that is lousy design, to put a value in a field, even though you have not selected it? What value does that serve?
    Ultimately what counts is the option displayed when the control loses focus. At that point any change will trigger the onchange event.
    Tab-indentation is a crime against humanity.

  9. #9
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will have to respectfully disagree. What ultimately counts, is that a user of our web pages see something that makes sense. Having the situation where the user can type a letter, and a name pops into the field, and the user clicks that name (in the field, not in the dropdown), the drop down disappears, and the name remains in the field, but the info in the div is not representative of that name, but still contains the info from the previously selected name because the onchange event has not fired. At that point in time, the user will be looking at the page and would see the name they thought they had selected, but the div would have the info for the previously selected name. In the case of my web page, that div contains buttons, and if they clicked on one of them, it would take them to a different page for the selected student, which since the onchange event didn't fire, would not be for the student they thought they had selected. Complicated to explain I know, but I just think it is lousy design by Chrome. It doesn't happen this way in IE.

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dloughli View Post
    I just think it is lousy design by Chrome. It doesn't happen this way in IE.
    You're not going to change Chrome, and what you are complaining about is something that JavaScript has no ability to solve for you. So, perhaps a rethink of the UI is needed, as it seems to be clear that the select list is not a viable solution for you and your students.

    How many items are in the drop-down list, and how are they used?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dloughli View Post
    At that point in time, the user will be looking at the page and would see the name they thought they had selected, but the div would have the info for the previously selected name. In the case of my web page, that div contains buttons, and if they clicked on one of them, it would take them to a different page for the selected student, which since the onchange event didn't fire, would not be for the student they thought they had selected.
    It is a misleading form of operation albeit for what I consider is a very rare scenario. A mouse user is unlikely to select via keyboard. If you're stuck using <select>s, the best piece of crutchware I can devise is to blur all <select>s whenever the div in question is hovered. That will at least cause the current selection to be re-displayed. Specify the ID of your div as shown:
    Code:
    <script type='text/javascript'> /* Place this block at a point BELOW all <select> elements */
    
    (function()
    {
      for( var i = 0, id; ( id = arguments[ i ] ); i++ ) 
        lh( document.getElementById( id ) );
     
      function boxBlur( )
      {
        var boxes = document.getElementsByTagName( 'SELECT' );
       
        for( var i = 0, bx; ( bx = boxes[ i ] ); i++ )
          bx.blur();
      }
     
      function lh( elem )
      {
        elem.addEventListener ? elem.addEventListener( 'mouseover', boxBlur, false )   
                              : elem.addEvent( 'onmouseover', boxBlur );  
      }
     
    })( "theDiv" ); // <- Id of div to be hovered. Multiple IDs can be specified, separated by commas.
    
    </script>
    Tab-indentation is a crime against humanity.

  12. #12
    SitePoint Member
    Join Date
    May 2013
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you're right, I can't change Chrome.
    The number of names in the drop down can vary up to thousands. I had originally developed my own autocomplete element for this field, but when the number of names in the drop down got very large, it started to get a little "funky" (how's that for a technical term, lol). I guess I'll just have to consider it a educational issue, where users will have to learn to not click in the field to close the dropdown when they see the name in it.
    Thanks for your replies.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •