本日、家計診断Proをテスト利用してくださっているFPの方から、
「一部セルでスピンボタンが表示されない」
「数値入力時にカーソルが飛んだり、文字が消えてしまう」
といった不具合のご報告をいただきました。
ご協力いただいた皆さま、本当にありがとうございます。
■ 不具合の内容
主に以下のセルで、操作が正常に行えない現象が確認されました。
- 西暦入力セル（2025）
- 本人年齢・配偶者年齢・子どもの年齢（上段）
- 変動率（賃上げ率・物価・利回り）
症状としては：
- カーソルが入らない
- スピンボタン（▲▼）が表示されない
- 数値を入力しようとするたびカーソルが消える
- マウスオーバーで UI が瞬間的に消える
というものです。
■ 原因：sticky と number input の z-index の衝突
調査の結果、
「左右スクロール時の sticky 列」と
「number input（特に Safari 系ブラウザ）のスピンボタン」
の z-index が干渉することで、
input が “押しつぶされるように後ろへ回り込んでしまう”
現象が発生していました。
そのため：
- カーソルが入らない
- スピンボタンが隠れる
- 入力値が一瞬で消える
という「仕様に見えるバグ」が起きていた形です。
■ 対応：z-index を全面的に整理し、干渉を排除
今回の修正では、以下を行いました。
① sticky 系の z-index を整理
- 左列（項目・基準値）を z-20 / z-30 に統一
- ヘッダー（上段）を z-40 に統一
② 数値入力セルに専用クラスを付与
.cfq-num-input {
position: relative;
z-index: 5; /* sticky より低いが、通常セルより高い */
}
③ 上段の一部 input を「defaultValue＋onBlur」に変更
これにより、
頻繁な再レンダリングによるカーソル飛び
を解消しました。
④ AgeOverride・変動率の input も同様に整理
- できるだけ 再描画の少ない制御 に変更
- onBlur による確定方式へ切り替え
■ 結果：主要な入力系の不具合は解消
以下の項目が 正常動作 に戻りました。
- 西暦（2025）セル
- 年齢（本人・配偶者・子）
- 変動率（賃上げ率／物価／利回り）
- 収入・支出・資産負債の数値セル
特に、
- スピンボタンの復活
- 入力中のカーソル飛びの解消
- スクロール時の見切れ／浸潤の解消
といった改善が確認できました。
■ Enter キーによるフォーカス移動について
今回の修正の中で、
Enter キーで右隣／下のセルへ移動する機能
についても試験実装を行いましたが、
- 西暦・年齢の右セルは「自動計算で入力不可」
- テキストセル（イベント）は独立運用した方が安全
などの仕様上、動作が安定しなかったため、
現時点では Enter ナビゲーションは実装を一旦保留 としています。
今後、ユーザー体験を損なわない形での導入を検討します。
■ 今後の改善予定
- Enter／Tab によるスムーズな入力ナビゲーション
- モバイル操作時の UI 最適化
- 数値セルの「上下キーで前後セル移動」機能
- 入力スピードを上げる “FP向けショートカットモード”
■ 最後に
今回の不具合は、FPの方々からのフィードバックがなければ見つけられなかった内容でした。
実務で使うツールは、とにかく “動作の安定” が最重要。
これからも改善を続けて、
「FPが現場で安心して使える家計診断ツール」
に仕上げてまいります。
ご協力いただいた皆さまに心より感謝申し上げます。
コメント