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.
On Thursday, July 28, 2016 at 1:33:00 PM UTC+2, Zeljko Nesic wrote:
>
> 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.
