📐

MUIのAutocompleteでのloadingとoptionsの関係

2024/04/05に公開

MUI（Material UI）にはAutocompleteというComponentがあります。

こいつは文字通りフォームでの入力を自動補完してくれる便利なやつですが、その分だけ複雑になっています。

ComponentのAPIドキュメントを見ると属性が多くて、何をどうしたらいいんだ… ってなりがち。

この中で

この組み合わせによる挙動が最近のバージョンで一時的に変わってしまったので、書き留めておきます。

何がどうなったのか

具体的にはloadingがtrueかつ、optionsが設定されていた場合の挙動に影響がありました。

<Autocomplete {...props} loading={true} options={['foo', 'bar']} />

こうした場合に、以前は読込中ではなく補完候補が表示されていました。options.length > 0の場合にはloadingの状態に関わらず候補が出てきます。

先月リリースされたv5.15.13では、この場合に何も表示されなくなってしまいました。

diffを見ると、他の問題を修正した時に意図せず紛れ込んだ挙動と思われたのでissueを立てて報告しました。

やはり意図しないバグだったようで、v5.15.15で修正されました。

どちらかと言うとoptionsに候補があっても、loadingフラグが立っていればloading表示になる方が自然ではないかとも思ったのでその提案も込めてPRを上げましたが、ひとまず既存の動作を復元する決定となりました。

後方互換性は大切なのでそれはそれで妥当な判断でしょう。これまで書かれてなかったテストケースも増えたし、v6も含めて当面この挙動が継続されると見て大丈夫でしょう。

さっきの表でまとめると、〜v5.15.12とv5.15.15〜の挙動は以下のようになります。

v5.15.13とv5.15.14では挙動が異なるので、該当バージョンを使っている場合はv5.15.15に上げてしまうのをおすすめします。