Search Selection widget

[Bernd Meyer]

I'm trying to create a search selection widget like http://semantic-ui.com/modules/dropdown.html#search-selection in elm. I would the user to be able to browse through the options using the arrow keys. In order to avoid scrolling in the browser when an arrow key is pressed I'm using onWithOptions with preventDefault True. This seems to work however, but the input functionality is broken since all keystrokes are consumed by the key handler. Here is the relevant part of the code.

handleKey: List String ->  Int -> Action
handleKey options code =
  case code of
        13 -> Submit (List.head options)
        27 -> Close
        _  -> NoOp
    
openDropdown : Signal.Address Action -> Model -> List String -> Html
openDropdown address model options =
    div [ attribute "aria-label" "Filter venue"
        , class "ui search selection dropdown active visible"
        , onWithOptions "keydown" evOptions keyCode (\code -> Signal.message address (handleKey options code))
        ]
      [ i [ class "dropdown icon" ] []
      , input 
        [ on "input" targetValue (Signal.message address << Update)
        , placeholder model.value
        , tabindex 0] []
      , div [ class "text" ] [ text model.inputValue ]
      , div [ class "menu transition visible", attribute "style" "display: block !important;", tabindex -1 ]
          (itemsView address model.value filtered)
      ]

[Erkal Selman]

I am also interested in the answer.

Does anyone know a solution (for 0.17)?

[Zeljko Nesic]

I today had a plan of rewriting my dropdown component from Angular to Elm, which was inspired by SemanticUI's one. 

Anyway, my solution was handle those keys inside the input field. 

Also, make sure, just to preventDefault, and let propagation fall through. == { stopPropagation = False , preventDefault = True }

hope this helps

On Monday, February 15, 2016 at 8:29:59 PM UTC+1, Bernd Meyer wrote:

[Erkal Selman]

I don't understand. What do you mean by "handle those keys inside the input field"?

The problem is that if we prevent the default arrow key behaviour with preventDefault, writing into the input field is also prevented.

[Erkal Selman]

In other words, I want to prevent the default behaviour not for all keypresses but only for up and down arrow keypresses. Is this possible?

[Zeljko Nesic]

Sorry, for being unclear and imprecise. 

I have tried to implement that behavior, but it seems that there is no neat way to do it. I have searched elm-discuss, and even though many wanted feature that will enable this kind of things, it seems there is no clear way to do it.

I can imagine some workarounds, but I believe anything would be wonky with out ability to dynamically pass event options. 

Again, sorry for being miss leading :)