@threestarsoftware/tssgrid 0.1.15 → 0.1.17

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.17] - 2026-10-05
+
+### 修正
+- **チェックボックス列のヘッダに `data` 名（'checked' 等）が出てしまう不具合を修正**（コア）— `{ type:'checkbox', data:'checked' }` のように **`title` を書かない**と、見出し決定ロジックが「title 未設定 → `data` 名」に落ちてヘッダに「checked」が表示されていた。checkbox 列のヘッダは「**全選択チェックボックス**」なので data 名が出るのはほぼ常に不要。**checkbox 列は title 未設定でもヘッダを空**にするよう修正（`title` を明示すればそれを尊重／`title:''` も従来どおり空）。**非 checkbox 列は従来どおり**（title 未設定なら data 名→列ラベル）。
+
+## [0.1.16] - 2026-10-04
+
+### 修正
+- **ドロップダウン（`type:'dropdown'`）で「未選択」のまま矢印キーを押すと先頭オプションが選ばれてしまう不具合を修正**（コア）— ネイティブ `<select>` はフォーカス中（リストが閉じていても）`↑↓←→` でオプションが変わる仕様で、特に「未選択（空）を選ぶと値が変わらず `change` が出ない＝エディタへフォーカスが戻らない」ため `<select>` にフォーカスが残り、次の矢印が `<select>` に吸われて **空→先頭** に変化＋即確定していた。`<select>` の keydown で `←→↑↓` を横取りし、**現在値を確定して隣セルへ移動（Excel 流の nav）**に。リスト展開中は OS ポップアップがキーを奪うのでこのハンドラは発火しない＝閉じてフォーカスだけ残った時の誤爆のみを防ぐ。`Enter`/`Tab`/`Esc` は不変。
+
 ## [0.1.15] - 2026-09-30
 
 ### 追加

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threestarsoftware/tssgrid",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "軽量・ノービルド・日本語IME堅牢な編集グリッド（vanilla JS / 依存なし / MIT）。Excel ライクな入力画面を <script> タグ1本で。",
   "license": "MIT",
   "author": "ThreeStarSoftware (https://www.threestarsoftware.co.jp/)",

package/src/tssgrid.js

@@ -61,8 +61,15 @@
       this.name = opts.name || 'grid';
       this.columns = opts.columns || [];
       // 見出し: 明示 headers > columns の title/data 由来 > 既定 A,B,C
+      // 見出しの決定: 明示 title（'' 含む）を最優先で尊重。checkbox 列は「ヘッダ＝全選択チェック」なので
+      // title 未設定でも data 名（'checked' 等）を出さない（空）。それ以外は title 未設定なら data 名→無ければ列ラベル。
       this.headers = opts.headers || (this.columns.length
-        ? this.columns.map((c, i) => (c && (c.title || c.data)) || TssGrid._colLabel(i))
+        ? this.columns.map((c, i) => {
+            if (!c) return undefined;                            // 列定義なし＝従来どおり（空表示）
+            if (c.title != null) return c.title;                 // 明示 title（'' で見出し無し）を尊重
+            if (c.type === 'checkbox') return '';                // checkbox は data 名を見出しに出さない
+            return c.data || TssGrid._colLabel(i);               // 従来: title 未設定は data 名 → 無ければ列ラベル
+          })
         : ['A', 'B', 'C']);
       this.COLS = this.headers.length;
       // データ取り込み: 配列(string[][]) と オブジェクト配列(object[]) を自動判別。
@@ -3011,6 +3018,18 @@
         if (e.key === 'Enter') { e.preventDefault(); this._commitSelect(); this._advance('enter', e.shiftKey); }
         else if (e.key === 'Tab') { e.preventDefault(); this._commitSelect(); this._advance('tab', e.shiftKey); }
         else if (e.key === 'Escape') { e.preventDefault(); this._cancelSelect(); }
+        else if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+          // ←→↑↓ はネイティブ <select> の「オプション変更」を止め、現在値を確定して隣セルへ移動（Excel 流の nav）。
+          // これが無いと、未選択(空)のまま矢印を押すと select が選択肢を 空→先頭 に変え change が即確定＝「矢印で先頭が選ばれる」不具合になる。
+          // リストが開いている時は OS ポップアップがキーを奪いこのハンドラは発火しない＝閉じて focus だけ残った時の誤爆のみ防ぐ。
+          e.preventDefault();
+          this._commitSelect();
+          const r = this.active.r, c = this.active.c;
+          if (e.key === 'ArrowUp') this.setActive(this._stepRowM(r, c, -1), c);
+          else if (e.key === 'ArrowDown') this.setActive(this._stepRowM(r, c, 1), c);
+          else if (e.key === 'ArrowLeft') this.setActive(r, this._stepColM(r, c, -1));
+          else this.setActive(r, this._stepColM(r, c, 1));
+        }
       });
       this.select.addEventListener('blur', () => { if (this.mode === 'edit' && this.select.style.display !== 'none') this._commitSelect(); });
       // 選択肢を選んだら即確定（移動はしない＝Excel と同様にそのセルに留まる）。