EC-CUBE / EC-CUBE/ec-cube

ファイル管理のフォルダツリーが Bootstrap 5 で開閉しない(JS 生成側が data-toggle のまま)

Open Beginner friendly
#7,103 0 comments 0 reactions 0 assignees View on GitHub
bug bug:Middle
Dominant language
PHP
Stars
788
Forks
719
Avg merge
4d 4h
Merged PRs (30d)
39

Description

## 概要

コンテンツ管理 > ファイル管理のディレクトリツリーで、`file_manager.js` の
`buildDirectoryNode()` が生成するフォルダのラベルが Bootstrap 4 の `data-toggle="collapse"` を
出力しています。本体は `bootstrap: ^5.3.8` で、Bootstrap 5 は `data-bs-toggle` しか解釈しないため、
生成されたフォルダの開閉が動作しません。**実機で再現を確認済みです**(後述)。

静的に書かれている `user_data` のラベルだけは `data-bs-toggle` になっており、
**同じ画面で静的側と JS 生成側の作法が食い違っています。**

## 該当箇所(origin/4.4)

ツリーは `Content/file.twig:92` の `eccube.fileManager.viewFileTree('directory_userdata', …)` から
`file_manager.js:236` の `buildDirectoryNode()` を経て生成され、`:238` で `#directory_userdata` の
中身が置き換わります。

| ファイル | 行 | 内容 |
|---|---|---|
| `html/template/admin/assets/js/file_manager.js` | 336 | `label.attr('data-toggle', 'collapse')` — BS4 の属性 |
| 同上 | 337 | `label.attr('href', '#' + path.replace('/', '_'))` — 対応する `ul` の id |
| 同上 | 339 | `label.attr('aria-control', '')` — 正しくは `aria-controls` |
| 同上 | 348 | 子 `ul` に `collapse list-unstyled` を付与(BS5 の CSS で非表示になる) |
| `src/Eccube/Resource/template/admin/Content/file.twig` | 308 | 静的ラベルは `data-bs-toggle="collapse"`(こちらは正しい) |

同ファイル `:313` にも文字列連結で `data-toggle="collapse"` を出力する記述がありますが、
`:240` の `/** FIXME: will be remove comment when solution accepted` から `:319` の `*/` までの
ブロックコメント内にあり、実行されません。

## 再現手順と実測結果

1. `html/user_data/` 配下に 2 階層のディレクトリを作る(例: `qa7103/child1`, `qa7103/child2`)
2. 管理画面 > コンテンツ管理 > ファイル管理を開く
3. 生成されたフォルダの開閉ラベル(フォルダ名の左、44×24px)をクリックする

**結果: 何も起きません。** クリック前後で以下がまったく変化しませんでした。

| 項目 | クリック前 | クリック後 |
|---|---|---|
| `#_qa7103` の `display` | `none` | `none` |
| `#_qa7103` の class | `collapse list-unstyled` | `collapse list-unstyled` |
| ラベルの `aria-expanded` | `false` | `false` |
| 子フォルダ(child1 / child2)の可視状態 | 非表示 | 非表示 |

生成される DOM は次のとおりで、`data-bs-toggle` は付いていません。

```html



  • qa7103


  • ```

    ### 原因が属性名であることの確認

    同じページで、**ラベルの属性を `data-toggle` から `data-bs-toggle` に差し替えるだけ**(他は一切変更なし)で
    クリックすると、正常に展開しました。

    | 項目 | 属性差し替え後 |
    |---|---|
    | `#_qa7103` の `display` | **`block`** |
    | `#_qa7103` の class | **`list-unstyled collapse show`** |
    | ラベルの `aria-expanded` | **`true`** |
    | 子フォルダの可視状態 | **表示** |

    検証環境: EC-CUBE 4.4(`origin/4.4` と同一の `file_manager.js`)/ Docker / Bootstrap 5.3

    なお、フォルダ名の `` には `openFolder()` の click ハンドラが別途付いており(`:331-334`)、
    そちらはフォルダの移動として機能します。効かないのは collapse による展開のみです。

    ## 期待する動作

    生成されるラベルも `data-bs-toggle="collapse"` になり、フォルダが展開・収納できる。

    ## 補足

    - 既存の不具合であり、特定の PR による退行ではありません。`data-toggle` は 4.4 の現行 HEAD 時点から
    存在し、`bootstrap` も同時点で既に 5 系です。
    - あわせて `aria-control` のタイポ(`aria-controls` が正)も直せます。
    - `a.html(name)`(`:330`、生成ノードのフォルダ名)は `text(name)` にできます。フォルダ名は
    `FileController` 側で文字種を制限しているため実害はありませんが、修正のついでに揃う範囲です。

    Contributor guide

    Open the contributing guide

    Research direction

    Start at html/template/admin/assets/js/file_manager.js in buildDirectoryNode(), where the generated folder label and child ul are assembled, and compare it with the static label in src/Eccube/Resource/template/admin/Content/file.twig. Verify the generated label uses Bootstrap 5 collapse attributes, including the aria-controls spelling. Done means generated folders expand and collapse in the file manager, matching the reported DOM behavior.

    Written by the indexing model from the issue text.

    Assessment

    Tech stack
    bootstrap, javascript
    Domain
    frontend
    Issue type
    Bug
    Difficulty
    2/5
    Estimated time
    1-3 hours
    Activity status
    Active
    Clarity
    Clearly specified
    Newbie friendliness
    88/100

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.