Debugging Athena

Jul 16, 2020


Athena Issue -

We came up with a solution so that the the arrow keys do scroll vertically through the menu items. The animation is a bit janky though.

Inside key-down-handler in athena.cljs -

(= key KeyCodes.UP)
    (swap! state update :index dec)
    (let [cur-sel (first (array-seq (. js/document getElementsByClassName "selected")))]
        (.. cur-sel (scrollIntoView false {:behavior "smooth" :block "center"}))))

(= key KeyCodes.DOWN)
    (swap! state update :index inc)
    (let [cur-sel (first (array-seq (. js/document getElementsByClassName "selected")))]
        (.. cur-sel (scrollIntoView true {:behavior "smooth" :block "center"}))))

Using tabIndex might be another solution worth exploring - https://stackoverflow.com/questions/23268193/scrolling-inner-div-on-key-down-and-up/51927383#51927383.

Roam seems to use a React UI library called blueprint. We could borrow inspiration from this library on how to implement the smooth scrolling behavior.


UI issues are hard to debug. Solution - Don’t get into UI Development.