Hey folks!
I was looking for some advice on how to go about implementing a feature. I’m looking to add some keyboard shortcuts to a site, similar to GitHub’s shortcuts. I’m able to receive and handle key presses with a subscription:
subscriptions : Model -> Sub Msg
subscriptions _ =
Browser.Events.onKeyDown msgDecoder
msgDecoder : Decoder Msg
msgDecoder =
Decode.field "key" Decode.string
|> Decode.map PressedKey
But I’ve gotten stuck thinking about how to ignore these shortcuts when in another text field. For example, on GitHub you can use /
to focus the search field, but typing /
while editing an issue comment doesn’t trigger this behavior. The main thing I’ve thought of so far is to add a flag to the model that is adjusted based on focus / blur events:
type alias Model =
{ editing : Bool
...
}
view : Model -> Html Msg
view =
input
[ type_ "text"
, onInput ChangedText
, onFocus StartedEditing
, onBlur FinishedEditing
, value
]
[]
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
StartedEditing ->
( { model | editing = True }, Cmd.none )
FinishedEditing ->
( { model | editing = False }, Cmd.none )
...
subscriptions : Model -> Sub Msg
subscriptions model =
if model.editing then
Sub.none
else
Browser.Events.onKeyDown msgDecoder
But I’m a bit worried about remembering to add these onFocus
and onBlur
handlers to every input on the page. It feels like there might be a better way to do this?
Any ideas on a different way to approach this problem?
Thank you in advance for your help and time!!