SelectOneMenu: Hover effect on select items is not continuous with long item names

Describe the defect If selectOneMenu has a select item whose name is longer than the options box, a scroll bar appears so that the full name can be read by scrolling. When hovering over a select item, the background and text color of the respective item changes (e.g. to blue blackground and white text) but for select items with overlong names, the hover effect does not color the whole background of the select item.

Environment:

• PF Version: 10.0

To Reproduce The error also appears in PrimeFaces Showcase for SelectOneMenu. Steps to reproduce the behavior:

1. Go to http://www.primefaces.org:8080/showcase/ui/input/oneMenu.xhtml?jfwid=ed6c3
2. Activate the browser’s developer tools and select the first selectOneMenu.
3. Change the html code of one of the menu’s select items so that its name is longer than the box (a horizontal scroll bar should appear).
4. Scroll right and hover over the select item you just changed.
5. See error. The hover effect only covers a part of the select item’s name.

Expected behavior By hovering over a select item of selectOneMenu the background of the item should be colored completely (e.g. blue).

Example XHTML Note: Check that the width of the options box is smaller than the select item’s name.

<h:form id="frmTest">
  <p:selectOneMenu id="option" style="width: 150px">
        <f:selectItem itemLabel="Select One" itemValue=""/>
        <f:selectItem itemLabel="Short Entry" itemValue="Short Entry"/>
        <f:selectItem itemLabel="Very loooooooooooooooooooooooooooooooooong Entry"
                              itemValue="Very loooooooooooooooooooooooooooooooooong Entry"/>
  </p:selectOneMenu>
</h:form>

[miedrl]

It works with Rain now, thank you.

[melloware]

I see it now. But just as a note you didn’t need JS to do this just use the panelStyle attribute…

<p:selectOneMenu id="option" style="width: 150px" panelStyle="width: 200px" >