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:
>
> 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)
>> ]
>
>
>
--
You received this message because you are subscribed to the Google Groups "Elm
Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
