CSS menu, onClick takes focus from highlighted text

[Jason C]

I'm changing a regular <select> menu to a CSS menu, like so:

// toggle() changes the display value for menu
function toggle(e, id) {
var el = document.getElementById(id);
el.style.display = (el.style.display == 'none') ? 'block' : 'none';

toggle.el = el;
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return false;
}

// CSS Menu
<div onClick="toggle(event, 'menu')">
Choose
</div>

<div id="menu" style="display: none; position: absolute">
<div onMouseDown="doSomething('a')">
Option 1
</div>

<div onMouseDown="doSomething('b')">
Option 2
</div>
</div>

When the user selects an option, doSomething(x) works with highlighted text inside of a separate contenteditable field.

The problem I'm having is that when they click on "Choose", the contenteditable field loses focus, so I lose the highlighted text.

If I change the "toggle" command from onClick() to onMouseOver(), everything works as expected, so I'm 99% sure that the problem is that the onClick is making me lose focus. If I change it to onMouseDown, though, then I think toggle() is called on both MouseDown and MouseUp; when I click down, the menu toggles on, but then when I let off, it toggles back off. I don't think this would solve the problem of losing the highlighted text anyway, though; I'm pretty sure that I would still lose it as soon as I let off of the click.

Can you guys suggest a way that I can click to toggle this menu, without losing the highlighted text in the contenteditable field?

[Jason C]

On Wednesday, May 16, 2012 1:09:35 AM UTC-4, Jason C wrote:
> I'm changing a regular <select> menu to a CSS menu, like so:
>
> // toggle() changes the display value for menu
> function toggle(e, id) {
> var el = document.getElementById(id);
> el.style.display = (el.style.display == 'none') ? 'block' : 'none';
>
> toggle.el = el;
> if (e.stopPropagation) e.stopPropagation();
> e.cancelBubble = true;
> return false;
> }
>
> // CSS Menu
>
>

> Choose
> </div>
>
>
>
>
>
> Option 1
> </div>

>
>
>
> Option 2
> </div>
> </div>
>
> When the user selects an option, doSomething(x) works with highlighted text inside of a separate contenteditable field.
>
> The problem I'm having is that when they click on "Choose", the contenteditable field loses focus, so I lose the highlighted text.
>
> If I change the "toggle" command from onClick() to onMouseOver(), everything works as expected, so I'm 99% sure that the problem is that the onClick is making me lose focus. If I change it to onMouseDown, though, then I think toggle() is called on both MouseDown and MouseUp; when I click down, the menu toggles on, but then when I let off, it toggles back off. I don't think this would solve the problem of losing the highlighted text anyway, though; I'm pretty sure that I would still lose it as soon as I let off of the click.
>
> Can you guys suggest a way that I can click to toggle this menu, without losing the highlighted text in the contenteditable field?

I don't know if this is the best solution, or even a good one, but I did find a potential solution.

Changing this:

<div onClick="toggle(event, 'menu')">
Choose
</div>

to this:

<button onClick="toggle(event, 'menu')">
Choose
</button>

retains the highlight in the separate field. I used CSS to make the button identical to the original DIV.