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

[AtsushiM]

関連URL

概要

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

変更内容

確認方法

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

[pkg-pr-new[bot]]

Open in Stackblitz

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

commit: 16b56f9

[masa0527]

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

[uknmr]

開くと伸びる挙動

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

[AtsushiM]

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

[AtsushiM]

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