How to open primefaces selectOneMenu on mouse over

Question

I have implemented a selectOneMenu from primefaces and all works as it should when I click it to open.

<p:selectOneMenu id="dropdownMenu" value="#{viewBean.selectedItem}" styleClass="dropdown">
    <p:ajax listener="#{controllerBean.onSelectedItemChanged}" />
    <f:selectItem itemLabel="Item A" itemValue="A" />
    <f:selectItem itemLabel="Item B" itemValue="B" />
    <f:selectItem itemLabel="Item C" itemValue="C" />
</p:selectOneMenu>

But what I want is to open it when the mouse cursor is over it and close when it leaves.

I tried implementing the mouseenter and mouseleave functions and use them to click the dropdown but without success.

$('.dropdown').mouseenter(function(event) {
    console.log("IN dropdown");
    $(this).click();
});
$('.dropdown').mouseleave(function(event) {
    console.log("OUT dropdown");
    $(this).click();
});

The message is printed in the console, so the event is detected, and the click is also detected since I have also tried printing something when that happens, but the dropdown won't open programmatically.

UPDATE

Changing the click event for the trigger inside the dropdown makes this open and close correctly.

$('.dropdown').mouseenter(function(event) {
    console.log("IN dropdown");
    $('.ui-selectonemenu-trigger',this).click();
});
$('.dropdown').mouseleave(function(event) {
    console.log("OUT dropdown");
    $('.ui-selectonemenu-trigger',this).click();
});

The problem now is that when I move the mouse to select an option, the menu is closed because the mouse left the dropdown area.

Any ideas on how to get this to work?

Am I missing something?

Try .trigger('click') instead of click(); – danielgmarcos Mar 16 '16 at 11:27 — danielgmarcos, Mar 16 '16 at 11:27
Doesn't work, `.trigger('click')` has the same result. – Mikel Mar 16 '16 at 11:36 — Mikel, Mar 16 '16 at 11:36

andriy · Accepted Answer · 2016-03-16T14:40:22.693

2

Declare your select menu as

<p:selectOneMenu id="dropdownMenu" value="#{viewBean.selectedItem}" styleClass="dropdown" widgetvar="selectTest">

and use the following javascript

$('.dropdown').mouseenter(function(event) {
    PF('selectTest').show();
});


$('.dropdown').mouseleave(function(event) {
    var $target = $(event.toElement || event.relatedTarget);
    if(!($target.hasClass("ui-selectonemenu-items") || $target.hasClass("ui-selectonemenu-panel"))){
        PF('selectTest').hide();
    }

});

$('.ui-selectonemenu-items-wrapper').mouseleave(function(event) {
    PF('selectTest').hide();
});

edited Mar 16 '16 at 14:40

answered Mar 16 '16 at 12:49

andriy

4,074
9
44
71

1

It's better to use `$(document).on("mouseenter", ".dropdown", callback)`, so it keeps working after the component gets ajax-updated. See also http://stackoverflow.com/q/14400624 – BalusC Mar 16 '16 at 20:34

How to open primefaces selectOneMenu on mouse over

1 Answers1