Rich SelectOne Component

Overal Description

The component analogous to 3.3..3 <rich:comboBox> and should have the same look and feel, but should provides Select and not input functionality.

Component

 

Should be based on UISelectOne standard component

 

Page declarations samples

 

<rich:selectOne>
   <f:selectItem itemLabel="constantOption" itemValue="0">
   <f:selectItems="#{bean.items}">
</rich:selectOne>

Requirements

Attachment

Component can't be attached to standard components as designed as full featured select component.

Input element

  • default label functionlity should be implemented

Input element disablement

Input element could be disabled in order just to provide standard but skinned select functionality.

Should be controlled with enableManualInput (TODO: how about to change to disableDirectInput, or disableKeyboardInput?)

 

If attribute defined with true value - the selection should be still possible using mouse selection and the component value change should be processed at usually during JSF Lifecycle.

Component disablement

component should cupports disabled attribute as usual selectOne.

Select Items Groups and disabled Select Item

Both should be supported as for usual selectOne. The only question - implementation in first version. I think as time permit. Should be done after all other base functionality ready.

Selection control(button)show/hide

To Do: do we need this? I guees no at least for first release. Main reason - it's a select and not an input and we need avoid any confusions as it was in 3.3.x combo. Button could be hidden via CSS if need.

Select Items loading modes

I'm not sure we need ajax in first version. Let's postpone till the first component release to make it more simplier and stable.

Popup list

Popup list should be designed as for standard select components without complex markup redefinitions possibilities. (Always possible to review after votes in future)

Choosing Value

1) The user could choose the value from the popup list using mouse as usually.

 

2) Additionally rich keyboard support should be added(for enableManualInput=true):

  • the user should be able to type inside the field
      • list should opens after componenent focused and typing started in order the user could see the options
        • keyboard up and down arrows should be supported in opened list to choose the item
          • the input value should be in sync with currently selected item
        • first available option should be choosen on typing.
        • list should be optionally filtered with values corresponding to entered prefix(filterOnUpdates=true) or just scrolled to first suitable but not filtered allowing to choosing from the whole list using just popup scrolling(filterOnUpdates=false).
        • blur or pressing Enter key in that  component state(something choosen) should cause the current selection to be choosen and list closed
        • ESC key - should cause the popup to be closed but current value also should be choosen as for normal select component!
      • if no suitable options present for current input:
        • allow further typing but highlight current input somehow (e.g. grayed or in red)
        • in the same time empty popup with no values should be shown
        • blur, Enter or ESC key pressing in that  component state should clear the value and show default label if defined.
    • Handling arrow keys in input when popup closed
      • focused input should allow just scroll current value without opening the list(could make configurable if requested)

     

    if the list contains two similar labels and the label was just typed till the end manually - the first option will be selected. It will looks similar to standard quick navigation in HTML select component.

    Processing

    • should be processed as standard s:selectOne component. Should not require any additionals converters creation for default cases.
    • s:entityConverter should be supported.

     

    Not implemented in M4

    • filterOnUpdates - postponed completelly. Now list always getting filtered.
    • Highlighting of wrong input

    more will be added there if found