Problem with keyboard inputs and focus

[Martin DeMello]

Full code here: https://github.com/martindemello/crosspad.elm

I have a page consisting of an SVG crossword grid, and a group of radio buttons for various settings.

My subscriptions:

subscriptions: Model -> Sub Msg

subscriptions model =

  Sub.batch

    [ Keyboard.presses (\code -> KeyPress (fromCode code))

    , Keyboard.downs (\code -> KeyDown (fromKeyCode code))

    ]

for catching global keyboard presses (KeyDown for special keys and KeyPress for alpha). The full update handler is

update: Msg -> Model -> (Model, Cmd Msg)

update msg model =

  case msg of

    ClickSquare x y -> ({ model | cur_x = x, cur_y = y }, Cmd.none)

    KeyDown k -> (handle_keycode k model, Cmd.none)

    KeyPress c -> (handle_keypress c model, Cmd.none)

    SetSymmetry s -> (handle_symm s model, Cmd.none)

where ClickSquare and SetSymmetry come from inline event handlers in the svg grid and the radio group respectively. The problem is if I click on a radio button, the radio group gets the focus, and the arrow keys get processed by two separate handlers.

The narrow question I have is how I can detect and set the focused element (everything I found on google sounded hacky), or if this is not properly supported, what is the correct way to write my code? If I can attach my keyboard handlers just to the SVG element that would be great too, but I couldn't figure that out either.

I thought of overloading the ClickSquare handler to set the grid to "active" whenever a square is clicked, and wrapping my Keyboard.presses and Keyboard.downs handlers in an "if active" check, but that seems like doing manually what I should be able to just work with the browser to do for me.

martin