https://yukihane.github.io/tags/react-select/ Recent content in React-Select on 発火後忘失 Hugo ja © Yukihane, All Rights Reserved Sat, 13 Jun 2026 00:00:00 +0900 https://yukihane.github.io/blog/202606/13/react-select-async-ime-composition/ Sat, 13 Jun 2026 00:00:00 +0900 https://yukihane.github.io/blog/202606/13/react-select-async-ime-composition/ <h2 id="tldr">TL;DR</h2> <ul> <li>react-select の <code>AsyncSelect</code> は、IME（日本語入力）で文字を確定した後に <code>loadOptions</code> を再呼び出ししないケースがあります。</li> <li>原因は <code>compositionEnd</code> 後に <code>inputValue</code> が内部的に「変化なし」と判定され、検索が再トリガーされないことです。</li> <li><code>AsyncSelect</code> の <code>loadOptions</code> パターンをやめ、通常の <code>Select</code> + controlled <code>inputValue</code> + <code>useEffect</code> による自前検索に切り替えることで解決しました。</li> </ul> <hr /> <h2 id="症状">症状</h2> <p>非同期検索付きのセレクトボックスを <code>react-select</code> の <code>AsyncSelect</code> で実装していました。ユーザーがキーワードを入力すると API を呼んで候補を表示する、よくあるパターンです。</p>