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