Semantic UIのfuiDatepickerで「dynamic arrow」のダイヤマークが表示されるときの原因と対策

2021年12月24日2022年8月18日

今回はSemantic UIのfuiDatepickerで「dynamic arrow」のclassを持ったダイヤマークが表示されるときの原因と対策についてご紹介いたします。

Semantic UIのfuiDatepickerで「dynamic arrow」のダイヤマークが表示されるときの原因と対策

結論から言うと、Semantic UI自体のライブラリのバグです。

このダイヤマークはカレンダーを表示するときの吹き出しのような役目を果たしますが、たまに変な位置にダイヤマークが付くことがあるようです。

対策としては、プロジェクト全体のCSSにダイヤマークを指定してdisplay noneをつける方法があります。
なぜ個々のCSSではなくプロジェクト全体のCSSをいじるかというと、datepickerのポップアップのHTMLはbody直下につくので個々のファイルからは非常にいじりづらいからです。

CSSをつけるに当たっては、Semantic UIの下記のプルリクが参考になるかもしれません。
https://github.com/arfedulov/semantic-ui-calendar-react/issues/184

終わりに

今回はSemantic UIのfuiDatepickerで「dynamic arrow」のclassを持ったダイヤマークが表示されるときの原因と対策についてご紹介いたしました。

なお、Semantic UIは長年整備されておらず、2022年現在はSemantic UIからforkされたFomantic-UIのみ整備されております。
現在Semantic UIを利用している方は、Fomantic-UIを使うことを検討してみてください。