Debugging Athena

Contents

• Athena Issue -
• Takeaways

Athena Issue -

• up and down to go through list. arrow keys work, but now needs the list needs to scroll
• two items can be highlighted at once: one from mouse hover, one from arrow keys

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)
(do
    (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)
(do
    (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.

Takeaways

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