Make button focusable

app/Main.hs

@@ -78,7 +78,7 @@ handleAppEvent model evt = case evt of
   _ -> []
 
 buildUI :: App -> WidgetInstance App AppEvent
-buildUI model = trace "Creating UI" widgetTree4 where
+buildUI model = trace "Creating UI" widgetTree where
   widgetTree4 = hgrid [
       vstack [
         label "1" `style` [bgColor pink, border 1 pink],

src/Monomer/Core/Themes/Dark.hs

@@ -137,6 +137,8 @@ darkHover = darkBasic
 
 darkFocus :: ThemeState
 darkFocus = darkBasic
+  & L.btnStyle . L.border ?~ borderFocus
+  & L.btnMainStyle . L.border ?~ borderFocus
   & L.checkboxStyle . L.fgColor ?~ lightSkyBlue
   & L.dropdownStyle . L.border ?~ borderFocus
   & L.dropdownListStyle . L.border ?~ borderFocus

src/Monomer/Widgets/Button.hs

@@ -113,10 +113,13 @@ button :: Text -> e -> WidgetInstance s e
 button caption handler = button_ caption handler def
 
 button_ :: Text -> e -> [ButtonCfg s e] -> WidgetInstance s e
-button_ caption handler configs = defaultWidgetInstance "button" widget where
+button_ caption handler configs = buttonInstance where
   config = onClick handler <> mconcat configs
   state = BtnState caption Empty
   widget = makeButton config state
+  buttonInstance = (defaultWidgetInstance "button" widget) {
+    _wiFocusable = True
+  }
 
 makeButton :: ButtonCfg s e -> BtnState -> Widget s e
 makeButton config state = widget where
@@ -139,13 +142,17 @@ makeButton config state = widget where
     ButtonMain -> Just (collectTheme wenv L.btnMainStyle)
 
   handleEvent wenv ctx evt inst = case evt of
+    KeyAction mode code status
+      | isSelectKey code && status == KeyPressed -> Just result
+      where
+        isSelectKey code = isKeyReturn code || isKeySpace code
     Click p _
       | pointInViewport p inst -> Just result
-      where
-        requests = _btnOnClickReq config
-        events = _btnOnClick config
-        result = resultReqsEvents requests events inst
     _ -> Nothing
+    where
+      requests = _btnOnClickReq config
+      events = _btnOnClick config
+      result = resultReqsEvents requests events inst
 
   getSizeReq wenv inst = sizeReq where
     style = activeStyle wenv inst

tasks.md

@@ -244,13 +244,16 @@
   - Check scroll styling works correctly (contentRect being applied, etc)
     - Also handle hover so scrollbars get correct cursor
   - Move computeTextRect out of Renderer
+  - Multiline label
+  - Check dropdown width/ellipsis
 
 - Pending
-  - Multiline label
+  - Button should receive focus
+  - Move combinators out of exported Core (but still export from Monomer)
+  - Maybe unify criteria on zstack? Top layer config for both focus/click?
   - Check 1px difference on right side of labels/buttons
   - Check displaced textField when adding characters on right align
     - Also, when right is reached from left, everything is pushed out of screen
-  - Check dropdown width/ellipsis
   - Check getState/merge in all components
   - Add testing
     - Delayed until this point to try to settle down interfaces
@@ -266,18 +269,16 @@
   - Add user documentation
 
 Maybe postponed after release?
-  - Move combinators out of exported Core (but still export from Monomer)
-  - Button should receive focus
   - Handle window title, maximize, etc
     - Also handle as requests?
   - Handle onBlur/onFocus in all focusable widgets
-  - Maybe unify criteria on zstack? Top layer config for both focus/click?
   - Avoid findNextFocus on unfocusable children (listView items)
   - Restore focus to previous widget when zstack changes (dialog situation)
     - Also think about not losing focus because of click (when onlyTopFocusable is active)
   - Find way of avoiding hover effects when widget is not in the top layer
     - Hover should only be active for top level item
       - I need to think a way of setting a layer state for zstack
+  - Button should change color when clicked/actioned
   - Further textField improvements
     - Double clicking on empty puts the cursor at the end of ghost character
     - Right aligned version has cusor overlaid