プロジェクト

全般

プロフィール

操作
リンクをコピー

バグ #390

未完了

ファイル選択クリック正常 - ダイアログ表示問題修正

Redmine Admin さんが12日前に追加. 12日前に更新.

ステータス:
新規
優先度:
高め
担当者:
-
開始日:
2025-06-08
期日:
進捗率:

0%

予定工数:

説明

進展状況

ファイル選択エリアのクリックイベントは正常に動作していることを確認。しかし、ファイル選択ダイアログが適切に表示されない問題が残存。

観察された動作

ファイル選択イベントリスナー設定完了
ファイル選択エリアがクリックされました (複数回)

問題分析

  1. ✅ イベントリスナー: 正常設定・動作
  2. ✅ クリックイベント: 正常発生
  3. ❌ ファイルダイアログ: 表示されない
  4. ❌ イベント重複: 複数回発生している

原因候補

  1. fileInput.click() の実行タイミング問題
  2. ブラウザセキュリティ制限（ユーザージェスチャー要件）
  3. CSS display: none による影響
  4. イベントバブリング・重複実行

対応方針

  1. イベント重複防止機能追加
  2. ファイル入力要素の可視性確認
  3. ブラウザ互換性向上
操作
リンクをコピー
 #1

Redmine Admin さんが12日前に更新

🔧 ファイル選択ダイアログ問題修正実施

実施した修正

  1. イベント重複防止: クリック処理中フラグで重複実行防止
  2. イベント伝播停止: preventDefault(), stopPropagation() 追加
  3. CSS改善: display: none から position: absolute; opacity: 0 に変更
  4. デバッグ強化: ファイル選択の各段階でログ出力

修正詳細

イベント重複防止

let isProcessing = false;
fileInputArea.addEventListener('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    if (isProcessing) return;
    isProcessing = true;
    
    fileInput.click();
    
    setTimeout(() => { isProcessing = false; }, 500);
});

CSS可視性改善

.file-input {
    position: absolute;
    left: -9999px;
    opacity: 0;
    width: 0.1px;
    height: 0.1px;
    pointer-events: none;
}

期待される改善

  • ✅ イベント重複: 500ms内の重複クリック防止
  • ✅ ブラウザ互換性: display:none問題解消
  • ✅ デバッグ情報: より詳細なログ出力
  • ✅ ファイルダイアログ: 確実な表示

次回テスト確認ポイント

  1. ファイル選択エリアクリック時のダイアログ表示
  2. イベント重複の解消
  3. handleFileSelect関数の呼び出し確認
操作
リンクをコピー

他の形式にエクスポート: Atom PDF