git.iko.soy/rowtype-yoga/purescript-docs-search
on master help sign in
use input.select() (#12)

close #11

commit4d0c6f4969cb4366c08560517040bf4b19d44884 authorVladimir Kalnitsky <klntsky@gmail.com> dateWed 24 Jul 2019, 19:09 (7 years ago) parentba84141
1 file changed+16−7
src/Docs/Search/App/SearchField.purs+16−7
src/Docs/Search/App/SearchField.purs+16−7
@@ -18,7 +18,8 @@ import Web.DOM.ParentNode as ParentNode
1818import Web.HTML (window) as Web
1919import Web.HTML as HTML
2020import Web.HTML.HTMLDocument as HTMLDocument
21−import Web.HTML.HTMLElement (blur, focus, fromElement) as Web
21+import Web.HTML.HTMLElement (blur) as Web
22+import Web.HTML.HTMLInputElement as HTMLInputElement
2223import Web.HTML.Window (document) as Web
2324import Web.HTML.Window as Window
2425import Web.UIEvent.KeyboardEvent (KeyboardEvent)
@@ -65,12 +66,19 @@ handleAction = case _ of
6566 (map (HandleKey sid) <<< KE.fromEvent)
6667
6768 HandleKey sid ev -> do
69+
6870 when (KE.code ev == "KeyS") do
69− H.liftEffect $ withSearchField Web.focus
71+ state <- H.get
72+ when (not state.focused) do
73+ H.liftEffect do
74+ withSearchField HTMLInputElement.select
75+
7076 when (KE.code ev == "Escape") do
7177 state <- H.get
7278 if state.focused
73− then H.liftEffect $ withSearchField Web.blur
79+ then do
80+ H.liftEffect do
81+ withSearchField (HTMLInputElement.toHTMLElement >>> Web.blur)
7482 else do
7583 H.modify_ (_ { input = "" })
7684 H.raise $ InputCleared
@@ -80,7 +88,8 @@ handleAction = case _ of
8088
8189 EnterPressed -> do
8290 state <- H.get
83− H.liftEffect $ withSearchField Web.blur
91+ H.liftEffect do
92+ withSearchField (HTMLInputElement.toHTMLElement >>> Web.blur)
8493 H.raise $ InputUpdated state.input
8594
8695 FocusChanged status -> do
@@ -90,7 +99,7 @@ handleAction = case _ of
9099 then Focused
91100 else LostFocus
92101
93−withSearchField :: (HTML.HTMLElement -> Effect Unit) -> Effect Unit
102+withSearchField :: (HTML.HTMLInputElement -> Effect Unit) -> Effect Unit
94103withSearchField cont = do
95104 doc <- Document.toParentNode <$>
96105 HTMLDocument.toDocument <$>
@@ -99,7 +108,7 @@ withSearchField cont = do
99108 let selector = wrap "#docs-search-query-field"
100109
101110 mbEl <- ParentNode.querySelector selector doc
102− maybe mempty cont (mbEl >>= Web.fromElement)
111+ maybe mempty cont (mbEl >>= HTMLInputElement.fromElement)
103112
104113render :: forall m. State -> H.ComponentHTML Action () m
105114render state =
@@ -115,7 +124,7 @@ render state =
115124
116125 [ HH.input
117126 [ HP.value state.input
118− , HP.placeholder "Search for definitions"
127+ , HP.placeholder "Search for definitions... (S to focus)"
119128 , HP.id_ "docs-search-query-field"
120129 , HP.type_ HP.InputText
121130 , HE.onKeyUp (\event ->