@threestarsoftware/tssgrid 0.1.35 → 0.1.36

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 TssGrid の各リリースの変更点。日付は JST。形式は [Keep a Changelog](https://keepachangelog.com/ja/1.1.0/) 準拠（ゆるめ）。
 数値は特記なき限り**自社調べ**（headless Chrome / Windows 11・環境差あり）。
 
+## [0.1.36] - 2026-11-06
+
+inline ピッカー3兄弟（**tss-time / tss-calendar / tss-datetime**）に共通して潜んでいた「ポップアップの `<select>` が使えない／確定がピッカー内部の値を書き戻す／編集中の表示が食い違う」を一掃。土台としてコアに2つの affordance を追加。
+
+### 修正（コア）
+- **inline エディタの補助ポップアップ（`<select>` 等 focus を奪う要素を含む）へフォーカスが移っても編集を閉じない**ようにした。従来は共有 input が blur した瞬間に確定＋ポップアップ破棄だったため、**時/分/年/月のプルダウンを開こうとクリックすると閉じてしまい選べなかった**。inline ctx に `setPopup(el)` を追加し、`blur` の `relatedTarget` が登録ポップアップ内なら編集継続。
+- **カスタム `editor` を付けた date/time 列はネイティブ `<input type="date|time">` を重ねない**ようにした（`_nativeInputType` が `cfg.editor` を見る）。従来は `picker:false` を書き忘れるとネイティブ入力が裏に残り、**ブラウザのロケールで `09:00 AM` のように AM/PM 表示が出てセル表示（24h）と食い違っていた**。`picker:false` が無くてもカスタムエディタが入力/表示を一貫して握る。
+
+### 修正（プラグイン）
+- **`tss-time`**: inline で**打鍵後にポップアップの［決定］/Enter を押すと、select が持つ元の値を書き戻して打鍵が消えていた**のを修正（inline は共有 input を確定・select を触ったら input へミラー＋フォーカスを input へ戻す）。`hour12` 列で **AM/PM を切り替えると編集中だけ 24h 表記（`06:30`）がちらついた**のも、ミラーを 12h 表示形（`6:30 AM`・parser も受ける）にして解消。上記コア修正と合わせ、**時/分のプルダウンが選べる**ように。
+- **`tss-calendar`**: **年/月のプルダウンを押すとポップアップが閉じて選べなかった**のを修正（`setPopup` 登録＋選択後に共有 input へフォーカスを戻す）。値の確定（日クリック）・打鍵追従（`onInput`）は従来どおり。
+- **`tss-datetime`**: 同じく**年/月/時/分のプルダウンが選べなかった**のに加え、**打鍵がピッカーに反映されない／ピッカー操作が共有 input に出ない／`<select>` 変更後にクリックアウトすると表示文字列がそのまま生保存されて保存値が壊れる**（`YYYY-MM-DDTHH:MM` にならない）という問題を一括修正。**`TssDatetime.parse`（表示形→保存形。`format` の逆）を新設**し、列に `parse` が無ければ自動付与＝打鍵追従も確定（blur/Enter/決定）の round-trip も成立。ピッカー操作は表示形で共有 input にミラー＋フォーカスを戻す。保存値は常に `YYYY-MM-DDTHH:MM`。
+
 ## [0.1.35] - 2026-11-06
 
 ### 追加（プラグイン）

package/README.md

@@ -562,6 +562,8 @@ new TssGrid(el, { columns: [{ type: 'time', editor: t }] });
 ```
 - `opts`: `step`(分刻み, 既定1) / `hour12`(AM/PM 表示, 既定false) / `icon`(既定 `'🕐'`) / `openOnClick`(既定true) / `className`。
 - 🕐 を**シングルクリックで開閉**、**現在**/**決定**ボタン、キーボード（Enter 決定 / Esc 取消）、外側クリックで採用、フィルで下へコピー。見た目は `--time-*` 変数と `tss-time-*` クラスで自由に。
+- カスタム `editor` を付けた列は**ネイティブ `<input type="time">` を重ねません**（`picker:false` を書かなくてもOK）。`hour12` 列は編集中も **12h 表示**で一貫（保存は 24h）。
+- **日付＋時刻**は姉妹プラグイン `tss-datetime`（`editor: TssDatetime({ step: 5 }), format: TssDatetime.format`）。保存値は `'YYYY-MM-DDTHH:MM'`、表示は曜日つき。表示形→保存形の逆変換 **`TssDatetime.parse`**（列に `parse` 未指定なら自動付与）で、打鍵追従も確定の round-trip も成立。年/月/時/分のプルダウンは inline でもそのまま選べます。
 
 ### 同梱プラグイン: セルのコメント（tss-comment・Excel のメモ風）
 

package/package.json

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

package/plugins/tss-calendar.js

@@ -34,7 +34,7 @@
     var ty = new Date().getFullYear();
     var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
     var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
-    var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null;
+    var pop = null, view = null, sel = null, focus = null, ref = null, done = false, outside = null, ictx = null;
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     // ── 範囲選択（range）: 連続した日を1回の編集で選ぶ（休暇申請の開始〜終了 等）───────────
@@ -134,6 +134,8 @@
       var t = e.target;
       if (t.classList && t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
       else if (t.classList && t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
+      // 年/月を選んだ後は共有 input にフォーカスを戻す（select は render で作り直され、残すと焦点が宙に浮く）。
+      if (ictx && ictx.inline && ictx.input) { try { ictx.input.focus(); } catch (err) {} }
     }
     function onKey(e) {
       if (e.target && e.target.tagName === 'SELECT') return;   // 年/月プルダウン操作中は日移動しない
@@ -161,9 +163,9 @@
       try { rc.td.title = rangeTipOf(aIso, bIso); } catch (e) { /* noop */ }
     }
     function clearTip() { if (rc && rc.td) { try { rc.td.title = ''; } catch (e) { /* noop */ } } }
-    function show(anchor, value, onPick, onCancel, rangeCfg) {
+    function show(anchor, value, onPick, onCancel, rangeCfg, ctx) {
       teardown();   // 既に開いていれば先に片付ける（前の pop 除去＋outside リスナ解除・open-while-open の取り残し防止）
-      done = false; rc = rangeCfg || null; rangeStart = null; hoverEnd = null;
+      done = false; rc = rangeCfg || null; rangeStart = null; hoverEnd = null; ictx = ctx || null;
       rangeActive = rc ? (isRangeValue(value) || !!rc.def) : false;   // 既存値が範囲 or rangeDefault なら ON で開く
       sel = parseISO(value);
       // range の既存値（'YYYY/MM/DD～…' 等）は parseISO では取れない＝先頭日を緩く読んで月を合わせる。
@@ -181,13 +183,14 @@
       ref = { pick: onPick, cancel: onCancel };
       // inline は「外側クリック/フォーカス」を本体（_commitActive / blur）が持つ＝二重に閉じない・共有 input から
       // フォーカスを奪わない（＝打ち続けられる）。矢印/Enter/Esc も本体の既定に返す（onKey は pop 未フォーカスなので発火しない）。
-      if (inline) return;
+      // ★ ポップアップを本体に登録＝年/月の <select> へフォーカスが移っても編集を閉じない（②）。
+      if (inline) { if (ictx && ictx.inline && ictx.setPopup) ictx.setPopup(pop); return; }
       // 外側クリックで閉じる。ただしアンカー（開いた元セル）は除外＝再クリックはグリッド側でトグル処理させる
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) cancel(); };
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { clearTip(); if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function teardown() { clearTip(); if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } ictx = null; }
     function pick(d) {
       if (done) return;
       if (rc && rangeActive) {   // トグル ON＝2クリック範囲
@@ -206,7 +209,7 @@
         var rangeMode = typeof rangeOpt === 'function' ? !!rangeOpt(ctx) : !!rangeOpt;   // この行で範囲を使えるか（半休行は false＝トグル無し）
         var def = typeof rangeDefault === 'function' ? !!rangeDefault(ctx) : !!rangeDefault;  // トグル初期ON/OFF（行ごと可）
         var cfg = rangeMode ? { td: ctx.td, def: def } : null;
-        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, cfg);
+        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, cfg, ctx);
       },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',     // セル右端に表示する合図（opts.icon:'' で消せる）

package/plugins/tss-datetime.js

@@ -38,8 +38,16 @@
     var yrLo = opts.yearMin || (minD ? minD.getFullYear() : ty - 12);
     var yrHi = opts.yearMax || (maxD ? maxD.getFullYear() : ty + 12);
 
-    var pop = null, view = null, selD = null, selH = null, selM = null, ref = null, done = false, outside = null;
+    var pop = null, view = null, selD = null, selH = null, selM = null, ref = null, done = false, outside = null, ictx = null;
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
+    // inline: ピッカー操作の結果を共有 input に「表示形」で反映＋フォーカスを input に戻す。
+    // これで select へ移っても閉じず（②）、編集中の表示も一致（④）、クリックアウト確定も壊れない。
+    function syncInput() {
+      if (!(ictx && ictx.inline && ictx.input)) return;
+      var v = value();
+      ictx.input.value = v === '' ? '' : TssDatetime.format(v, { weekLabels: weekLabels });
+      try { ictx.input.focus(); } catch (e) {}
+    }
 
     function dDisabled(d) { if (minD && d < minD) return true; if (maxD && d > maxD) return true; return false; }
 
@@ -123,10 +131,10 @@
     function onClick(e) {
       var t = e.target;
       var nav = t.getAttribute && t.getAttribute('data-nav');
-      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); return; }
+      if (nav) { view = new Date(view.getFullYear(), view.getMonth() + (+nav), 1); render(); syncInput(); return; }
       var dd = t.getAttribute && t.getAttribute('data-d');
-      if (dd) { readTime(); var d = parseISOd(dd); if (!dDisabled(d)) { selD = d; render(); } return; }   // 日付選択しても閉じない（時刻も決めるため）
-      if (t.classList.contains('tss-dt-now')) { var now = new Date(); selD = now; selH = now.getHours(); selM = Math.round(now.getMinutes() / step) * step; if (selM >= 60) selM = 60 - step; view = new Date(now.getFullYear(), now.getMonth(), 1); render(); return; }
+      if (dd) { readTime(); var d = parseISOd(dd); if (!dDisabled(d)) { selD = d; render(); syncInput(); } return; }   // 日付選択しても閉じない（時刻も決めるため）
+      if (t.classList.contains('tss-dt-now')) { var now = new Date(); selD = now; selH = now.getHours(); selM = Math.round(now.getMinutes() / step) * step; if (selM >= 60) selM = 60 - step; view = new Date(now.getFullYear(), now.getMonth(), 1); render(); syncInput(); return; }
       if (t.classList.contains('tss-dt-clear')) { commit(''); return; }
       if (t.classList.contains('tss-dt-ok')) { commit(value()); return; }
     }
@@ -135,14 +143,15 @@
       if (t.classList.contains('tss-cal-sel-yr')) { view = new Date(+t.value, view.getMonth(), 1); render(); }
       else if (t.classList.contains('tss-cal-sel-mon')) { view = new Date(view.getFullYear(), +t.value, 1); render(); }
       else if (t.classList.contains('tss-time-h') || t.classList.contains('tss-time-m') || t.classList.contains('tss-time-ap')) { readTime(); var ro = pop.querySelector('.tss-dt-readout'); if (ro) ro.innerHTML = readoutHTML(); }
+      syncInput();   // 年/月/時/分/AM-PM いずれの変更も共有 input（表示形）へ反映＋input へフォーカスを戻す
     }
     function onKey(e) {
       if (e.key === 'Escape') { e.preventDefault(); cancel(); }
       else if (e.key === 'Enter') { e.preventDefault(); commit(value()); }
     }
-    function show(anchor, val, onPick, onCancel) {
+    function show(anchor, val, onPick, onCancel, ctx) {
       teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
-      done = false;
+      done = false; ictx = ctx || null;
       var p = parseDT(val), tp = p ? null : parseTimeOnly(val);   // 日付付き or 時刻のみ
       selD = p ? p.d : null;
       selH = p ? p.h : (tp ? tp.h : null);
@@ -156,21 +165,36 @@
       pop.addEventListener('keydown', onKey);
       render(); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
-      if (inline) return;   // inline は外側クリック/フォーカスを本体が持つ＝共有 input から奪わない（打ち続けられる）
+      // ★ ポップアップを本体に登録＝年/月/時/分の <select> へフォーカスが移っても編集を閉じない（②）。
+      if (inline) { if (ictx && ictx.inline && ictx.setPopup) ictx.setPopup(pop); return; }   // inline は外側クリック/フォーカスを本体が持つ（打ち続けられる）
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(value()); };   // 外側クリックは確定（time と同方針）
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } ictx = null; }
     function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
     function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
 
     return {
-      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      open: function (ctx) {
+        // 列に parse が無ければ付与＝表示形↔保存形の round-trip（打鍵追従・blur/Enter 確定）を成立させる。
+        if (ctx.grid && typeof ctx.c === 'number') { var cc = ctx.grid.colCfg(ctx.c); if (cc && typeof cc.parse !== 'function') cc.parse = TssDatetime.parse; }
+        show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, ctx);
+      },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '📅',
       openOnClick: opts.openOnClick !== false,
       inline: inline,   // true=共有 input に乗る＝日時をそのまま直打ちできる（矢印/Enter/Esc は本体の既定）
+      // inline のみ: 打った内容にピッカーが追従（ctx.parseCell＝セルの確定と同じ読み方。上で付けた parse を使う）。
+      onInput: inline ? function (v, ctx) {
+        if (!pop) return;
+        var iso = null; try { iso = ctx.parseCell ? ctx.parseCell(v) : v; } catch (e) { iso = null; }
+        var p = parseDT(iso), tp = p ? null : parseTimeOnly(iso);
+        if (!p && !tp) return;   // 打ちかけ/不正はピッカーを動かさない
+        if (p) { selD = p.d; if (p.h != null) selH = p.h; if (p.mi != null) selM = p.mi; view = new Date(p.d.getFullYear(), p.d.getMonth(), 1); }
+        else { selH = tp.h; selM = tp.m; }
+        render();
+      } : undefined,
       openAt: function (anchorEl, val, onPick) { show(anchorEl, val, function (v) { onPick(v); }, null); },
     };
   }
@@ -185,6 +209,23 @@
     return d.getFullYear() + '/' + pad(d.getMonth() + 1) + '/' + pad(d.getDate()) + wd + t;
   };
 
+  // 表示形 → 保存形。format の逆。'YYYY/MM/DD(曜) HH:MM'・'YYYY-MM-DDTHH:MM'・'YYYY/MM/DD'・'HH:MM' を受け、
+  // 'YYYY-MM-DDTHH:MM'（または 'YYYY-MM-DD' / 'HH:MM'）へ正規化。これを列 parse に付けると、打鍵追従も
+  // 確定（blur/Enter/決定）の round-trip も成立する（inline で editor が入力/表示を握るのに必須）。解釈不可は素通し。
+  TssDatetime.parse = function (v) {
+    var s = String(v == null ? '' : v).trim();
+    if (s === '') return '';
+    var m = /^(\d{4})[\/\-](\d{1,2})[\/\-](\d{1,2})(?:\s*\([^)]*\))?(?:[ T]+(\d{1,2}):(\d{2}))?/.exec(s);
+    if (m) {
+      var iso = m[1] + '-' + pad(+m[2]) + '-' + pad(+m[3]);
+      if (m[4] != null) iso += 'T' + pad(+m[4]) + ':' + pad(+m[5]);
+      return iso;
+    }
+    var t = /^(\d{1,2}):(\d{2})$/.exec(s);
+    if (t) return pad(+t[1]) + ':' + pad(+t[2]);
+    return s;
+  };
+
   if (typeof module !== 'undefined' && module.exports) module.exports = TssDatetime;
   else root.TssDatetime = TssDatetime;
 })(typeof self !== 'undefined' ? self : this);

package/plugins/tss-time.js

@@ -15,7 +15,7 @@
     opts = opts || {};
     var step = Math.max(1, opts.step || 1);
     var hour12 = !!opts.hour12;
-    var pop = null, ref = null, done = false, outside = null;
+    var pop = null, ref = null, done = false, outside = null, ictx = null;   // ictx: inline の ctx（共有 input が真実）
     var inline = opts.inline !== false;   // true=共有 input に乗る（直打ち可・矢印は本体に返す）／false=従来のフォーカス奪取型
 
     function opt(val, label, sel) { return '<option value="' + val + '"' + (sel ? ' selected' : '') + '>' + label + '</option>'; }
@@ -45,10 +45,24 @@
       if (hour12 && aS) { var ap = aS.value; h = ap === 'PM' ? (h === 12 ? 12 : h + 12) : (h === 12 ? 0 : h); }
       return pad(h) + ':' + pad(m);
     }
+    // 共有 input に見せる文字列。hour12 は 12h 表示形（"6:30 PM"＝列のセル表示と一致・parser も受ける）、
+    // それ以外は 24h（= 保存値 = 表示）。これで編集中に 24h がちらっと出る食い違いを無くす。
+    function readDisplay() {
+      var hS = pop.querySelector('.tss-time-h'), mS = pop.querySelector('.tss-time-m'), aS = pop.querySelector('.tss-time-ap');
+      if (!hS || hS.value === '' || mS.value === '') return readValue();
+      if (hour12 && aS) return (+hS.value) + ':' + pad(+mS.value) + ' ' + aS.value;
+      return readValue();
+    }
     function setNow() {
       var d = new Date(), m = Math.round(d.getMinutes() / step) * step; if (m >= 60) m = 60 - step;
       render({ h: d.getHours(), m: m });
+      mirrorToInput();   // inline: 現在ボタンの結果も共有 input へ
     }
+    // inline のとき、select の内容を共有 input に流し込む（確定はしない）。これで「打つ」と「選ぶ」が input に集約。
+    // 選び終えたらフォーカスを共有 input に戻す＝以降の「外クリックで確定」等が本体の既定どおり効く。
+    function mirrorToInput() { if (ictx && ictx.inline && ictx.input) { if (ictx.setValue) { var v = readDisplay(); if (v !== '') ictx.input.value = v; } try { ictx.input.focus(); } catch (e) {} } }
+    // 確定: inline は共有 input（打鍵 or ミラー済み）を真実として確定／非 inline は select を真実に。
+    function commitFinal() { if (ictx && ictx.inline && ictx.input) commit(ictx.input.value); else commit(readValue()); }
     function place(anchor) {
       var r = anchor.getBoundingClientRect();
       pop.style.left = Math.max(2, Math.min(r.left, window.innerWidth - pop.offsetWidth - 6)) + 'px';
@@ -58,34 +72,35 @@
     }
     function onClick(e) {
       if (e.target.classList.contains('tss-time-now')) { setNow(); return; }
-      if (e.target.classList.contains('tss-time-ok')) { commit(readValue()); }
+      if (e.target.classList.contains('tss-time-ok')) { commitFinal(); }
     }
     function onKey(e) {
       if (e.key === 'Escape') { e.preventDefault(); cancel(); }
-      else if (e.key === 'Enter') { e.preventDefault(); commit(readValue()); }
+      else if (e.key === 'Enter') { e.preventDefault(); commitFinal(); }
     }
-    function show(anchor, value, onPick, onCancel) {
+    function show(anchor, value, onPick, onCancel, ctx) {
       teardown();   // 既に開いていれば先に片付ける（open-while-open の取り残し防止・tss-calendar と同方針）
-      done = false;
+      done = false; ictx = ctx || null;
       pop = document.createElement('div'); pop.className = 'tss-time' + (opts.className ? ' ' + opts.className : ''); pop.tabIndex = -1;
       document.body.appendChild(pop);
       pop.addEventListener('mousedown', function (e) { if (e.target.tagName !== 'SELECT') e.preventDefault(); });
       pop.addEventListener('click', onClick);
       pop.addEventListener('keydown', onKey);
+      pop.addEventListener('change', function (e) { if (e.target.tagName === 'SELECT') mirrorToInput(); });   // inline: select を選んだら共有 input に反映（打鍵と集約）
       render(parseHM(value)); place(anchor);
       ref = { pick: onPick, cancel: onCancel };
-      if (inline) return;   // inline は外側クリック/フォーカスを本体が持つ＝共有 input から奪わない（打ち続けられる）
+      if (inline) { if (ictx && ictx.inline && ictx.setPopup) ictx.setPopup(pop); return; }   // inline: ポップアップを本体に登録＝select へフォーカスが移っても編集を閉じない。外側クリック/フォーカスは本体が持つ（打ち続けられる）
       // 外側クリックは「確定」（時/分を選んで離す＝採用）。未変更なら同値 commit＝実質no-op。アンカーは除外（再クリックはグリッドがトグル）
       outside = function (e) { if (pop && !pop.contains(e.target) && !(anchor && anchor.contains && anchor.contains(e.target))) commit(readValue()); };
       setTimeout(function () { document.addEventListener('mousedown', outside, true); }, 0);
       pop.focus();
     }
-    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } }
+    function teardown() { if (outside) { document.removeEventListener('mousedown', outside, true); outside = null; } if (pop) { pop.remove(); pop = null; } ictx = null; }
     function commit(v) { if (done) return; done = true; var f = ref.pick; teardown(); f(v); }
     function cancel() { if (done) return; done = true; var f = ref.cancel; teardown(); if (f) f(); }
 
     return {
-      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }); },
+      open: function (ctx) { show(ctx.td, ctx.value, function (v) { ctx.commit(v); }, function () { ctx.cancel(); }, ctx); },
       close: function () { teardown(); },
       icon: opts.icon != null ? opts.icon : '🕐',
       openOnClick: opts.openOnClick !== false,

package/src/tssgrid.js

@@ -159,7 +159,7 @@
       this._headerSel = null;   // 'col'/'row'/'all'=列/行/全選択モード（結合に拡張せず実列/行にクランプ＝Excel流）。null=通常セル選択
       this._selCols = new Set(); // 飛び飛びの列選択（Ctrl+ヘッダクリック）。_headerSel==='col' の時だけ有効。連続選択は矩形と一致
       this._selRows = new Set(); // 飛び飛びの行選択（Ctrl+行ヘッダクリック）。_headerSel==='row' の時だけ有効
-      this._inlineEd = null; this._inlineCtx = null;   // inline エディタ（editor.inline=true）: 共有 input に乗るエディタの現在値
+      this._inlineEd = null; this._inlineCtx = null; this._inlineEl = null;   // inline エディタ（editor.inline=true）: 共有 input に乗るエディタ。_inlineEl=補助ポップアップ参照
       this.disjointSelect = opts.disjointSelect !== false;   // Ctrl+ヘッダで行/列を飛び飛び複数選択（false で無効＝Ctrl+クリックは単一選択に戻る）
       // リサイズ（列幅・行高）
       // 列幅 colW[c]=px（未指定は既定）。指定方法は3通り、優先度＝実行時リサイズ/明示colW > columns[c].width > 既定:
@@ -1158,7 +1158,9 @@
     // ネイティブ入力(date/time ピッカー)を使う列か。使わない=テキスト入力。
     _nativeInputType(c) {
       const cfg = this.colCfg(c), t = cfg.type;
-      if ((t === 'date' || t === 'time') && cfg.picker !== false && !cfg.format && typeof cfg.parse !== 'function' && !cfg.hour12) return t;
+      // カスタム editor を付けた列は、そのエディタが入力/表示を握る＝ネイティブ picker を重ねない
+      // （重ねるとブラウザのロケールで AM/PM 等が出て、セル表示と食い違う）。picker:false を書き忘れても破綻しない。
+      if ((t === 'date' || t === 'time') && cfg.picker !== false && !cfg.format && typeof cfg.parse !== 'function' && !cfg.hour12 && !cfg.editor) return t;
       return null;
     }
     _usesTextEditor(c) {
@@ -2003,12 +2005,15 @@
         setValue(v) { grid.editor.value = grid._cellStr(v); },  // 候補で置き換える用（確定はしない）
         commit(v) { if (v != null) grid.editor.value = grid._cellStr(v); grid.commit(); grid.toNav(); grid.updateSelectionUI(); },
         cancel() { grid.setActive(r, c); },                     // 元値に戻して nav（Esc 相当）
+        // inline 補助ポップアップ（<select> 等 focus を奪う要素を含む）を登録＝その中へフォーカスが移っても編集を閉じない。
+        setPopup(el) { grid._inlineEl = el || null; },
       };
       this._inlineEd = ed; this._inlineCtx = ctx;
       try { ed.open(ctx); } catch (_) { this._inlineEd = null; this._inlineCtx = null; }
     }
     _closeInlineEditor() {
       const ed = this._inlineEd;
+      this._inlineEl = null;   // 登録された補助ポップアップ参照を解除
       if (!ed) return;
       this._inlineEd = null; this._inlineCtx = null;
       if (ed.close) { try { ed.close(); } catch (_) {} }
@@ -3095,8 +3100,11 @@
           else if (t === 'date' || t === 'time') this.toEdit(this.data[this.active.r][c], true);  // ネイティブピッカー
           // checkbox は文字入力を無視（Space / クリックでトグル）
         });
-        ed.addEventListener('blur', () => {
+        ed.addEventListener('blur', (e) => {
           if (this._customEditor) return;   // カスタムエディタが奪ったフォーカスでの blur は無視
+          // inline エディタの補助ポップアップ（<select> 等）へフォーカスが移った blur は編集継続（閉じない）。
+          const to = (e && e.relatedTarget) || document.activeElement;
+          if (this._inlineEl && to && this._inlineEl.contains(to)) return;
           if (this.mode === 'edit' && (!this.select || this.select.style.display === 'none')) { this.commit(); this.toNav(); this.updateSelectionUI(); }
         });
       });