Re: processing onfocus in mozilla seems to keep my select from expanding

Eric Trav wrote:
> Hello,
>
> I am using mozilla and javascript to change the style background color
> for my select with onfocus() and back to white with onblur().
>
> When i process onfocus(); i have to click on the select three times to
> get the popup menu and everything seems slow.

  I couldn't replicate your situation exactly, play code below.

  In Mozilla, when the select is clicked on, the options drop-down opens,
  onfocus fires and the background changes. The next click (anywhere in
  the page) will cause the drop-down to close but the select keeps focus,
  so the background does not change.

  If the next click (number 3) is not on the select, the select loses
  focus, onfocus to fires and the background is changed again.

  IE's behaviour is very different. A click on the select causes the
  onfocus to fire, the options drop-down opens, the background changes,
  then the drop-down closes and the onblur fires. All from just one
  click.

  The only way to select an option is the old Mac-centric way of
  mouse-down and drag to a selection. As soon as the mouse button is
  released, the drop-down closes and onblur fires. About 90% of users
  will likely never work out how to select an option.

> No errors are reported
> in the console however it seems as if the click event is not being
> processed after the focus event is processed.

  Which click event?

>
> I have looked through the groups and it appears as if there is no way
> for me to force the popup open (expand contents).

  You can't (AFAIK) use JavaScript to get the options drop-down to open.

>
> I was reading the gecko dom docs; but am not absorbing the solution.
>
> Any thoughts as to the problem, erros, solutions?

  Given the different behaviour of IE and Gecko browsers, I'd give it a
  miss. There seems little point in doing it, except maybe for users
  using keyboard navigation to provide extra highlight when the select
  element has focus. Even then, IE's effort is just to put a border
  around the element in the chosen background colour.

<!-- play code -->

<form action="" name="formA">
   <select name="selA"
    onfocus="this.style.backgroundColor='red';"
    onblur="this.style.backgroundColor='white';"
>
     <option>opt 0</option>
     <option>opt 1</option>
     <option>opt 2</option>
   </select>
   <input type="reset">
</form>

-- 
Rob