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?
On Thursday, July 28, 2016 at 1:55:18 PM UTC+2, Erkal Selman wrote:
>
> 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.
