make mobile Next key move down by using column-major tabindex on touch devices

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/cljs/microtables_frontend/views/sheet.cljs

@@ -17,25 +17,28 @@
 ;      - common functions (sum, avg, etc)
 ;        - display numeric answer in menu
 ;        - offer to put the answer (in formula form) in a cell (to be chosen by clicking)
-(defn cell [c r data]
-  (let [datum (get-in data [c r])]
+(defn cell [c r col-idx maxrow data]
+  (let [datum (get-in data [c r])
+        touch-device? (pos? (.. js/navigator -maxTouchPoints))]
     ^{:key (str c r)} [:td
-                       [:input {:id (str c r)
-                                :class (if (= (:view datum) :highlighted) "highlighted" "")
-                                :value (if (= (get datum :view nil) :value)
-                                         (get datum :value "")
-                                         (get datum :error (get datum :display (get datum :value ""))));TODO: add "highlight" display mode (possibly just a css class)
-                                :on-change #(re-frame/dispatch [::events/edit-cell-value c r (.. % -target -value)])
-                                :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
-                                :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])
-                                :on-keyPress #(when (= (.. % -which) 13)
-                                                (re-frame/dispatch [::events/press-enter-in-cell c r]))}]]))
+                       [:input (cond-> {:id (str c r)
+                                        :class (if (= (:view datum) :highlighted) "highlighted" "")
+                                        :value (if (= (get datum :view nil) :value)
+                                                 (get datum :value "")
+                                                 (get datum :error (get datum :display (get datum :value ""))));TODO: add "highlight" display mode (possibly just a css class)
+                                        :on-change #(re-frame/dispatch [::events/edit-cell-value c r (.. % -target -value)])
+                                        :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
+                                        :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])
+                                        :on-keyPress #(when (= (.. % -which) 13)
+                                                        (re-frame/dispatch [::events/press-enter-in-cell c r]))}
+                                 ; column-major tabindex on touch devices so "Next" moves down instead of right
+                                 touch-device? (assoc :tab-index (+ (* col-idx maxrow) r)))]]))
 
-(defn row [r cols data]
+(defn row [r cols maxrow data]
   ^{:key (str "row-" r)} [:tr
                           (cons
                            ^{:key (str "row-head-" r)} [:th (str r)]
-                           (map #(cell % r data) cols))])
+                           (map-indexed #(cell %2 r %1 maxrow data) cols))])
 
 (defn header-row [cols]
   ^{:key "header"} [:tr
@@ -54,4 +57,4 @@
           cols (take-while (partial not= (coords/next-letter maxcol)) coords/col-letters)]
       (cons
        (header-row cols)
-       (map #(row % cols data) (range 1 (inc maxrow)))))]])
+       (map #(row % cols maxrow data) (range 1 (inc maxrow)))))]])