fix: Comboboxの選択肢表示位置がズレてしまう問題を修正 - Githubissues

kufu / smarthr-ui

React components for creating SmartHR applications.

https://story.smarthr-ui.dev

MIT License

879 stars 141 forks source link

fix: Comboboxの選択肢表示位置がズレてしまう問題を修正 #5047

Closed AtsushiM closed 1 month ago

AtsushiM commented 1 month ago

関連URL

概要

特定の条件を満たすとcomboboxの選択肢リストの表示が崩れてしまう問題を解決します
- 条件
- 選択肢が1~4個の場合
  - helpMessageが存在すると発生しやすい
- combobox下にリストを表示する領域が存在しない
- 症状
- リスト下に余計な空白が生じてしまう
- 2回目以降の表示は正常になる
- 原因
- 選択肢リストの高さに応じて計算する処理が存在するが、その処理より前に選択肢リストのwidthを調整していないため、初回表示のみ表示崩れが起きる
- helpMessageなど成り行きで高さが変わる要素が含まれるため、幅が変われば高さも連動して変わる
- 選択肢の数が一定以上になるとmaxHeightによって上限に達するため問題は発生しなくなる

変更内容

確認方法

選択肢リストの位置、高さ、幅の計算を同時に行なっていたロジックを分解し、幅の計算のみを先んじて行うように修正

pkg-pr-new[bot] commented 1 month ago

Open in Stackblitz

pnpm add https://pkg.pr.new/kufu/smarthr-ui@5047

commit: 16b56f9

masa0527 commented 1 month ago

前から開くと伸びる挙動でしたっけ？

uknmr commented 1 month ago

開くと伸びる挙動

伸びないです! 伸びてるというか、パネルの方が縮んでそう。

AtsushiM commented 1 month ago

isExpandedでwidthも再計算する必要がありました (開閉毎に選択肢が変わったりする可能性があった)

AtsushiM commented 1 month ago

MultiComboboxの幅の狂いもこれで治ったはず