[Moo] Control select box

[4fingers]

Hi,

I am wanting to combat the problem with IE select boxes that have a
fixed width. If the text in the options goes past this fixed width
then the text is simply cut off. To get round this I have found basic
solutions that will change the width of the select box when the select
box is onfocus. The downside to this is you have to click twice to see
the menu, once to increase the width of the select box to and again to
see the drop down menu options.

I was hoping I could use MooTools 1.2.3 to detect when the select box
was clicked, then I would stop the options from appearing, increase
the width, then allow the options to appear.

Then when the user made their selection or clicked elsewhere the
select box would go back to its fixed width.

So far I have been unable to prevent the drop down menu from appearing
with the following code:

window.addEvent('domready', function(){
        $('select2').addEvent('click', function(event) {
        var event = new Event(event).stop();
                $('select2').setStyle('width', 'auto');
    });
 });
<select id="select2" style="width:100px;" >
  <option>123456789</option>
  <option>123456789 123456789</option>
</select>

The drop down menu flashes for a brief second before the width is
adjusted.

Does anyone know how I can disable to the select box so there is no
flash, then once the width has changed fire the event that causes the
drop down menu to appear?

Thanks