経緯
テスト環境でいろいろ触っていたところ、<Select />の初期値に設定していた"Select..."の選択肢がどんどん増えていく現象に遭遇。
最初はこうですが、
"s"と入力し、
"p"も入力し、（この時点でちょっとおかしい、、）
"p"を削除するとあら不思議！
"Select..."が増えました！！（なんで？？）
ちなみに、"s"と"sp"を行ったり来たりする度に一つずつ増えます。（なんでさ、、）
環境
- node.js: 20.12.0
- その他パッケージ
package.json(抜粋)
"dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^5.0.0", "semantic-ui-css": "2.5.0", "semantic-ui-react": "2.1.5" }
原因
きっちりとした原因はわかりませんが、特殊な条件が上手いこと組み合わさった結果、こういった不具合が発生するようです。
再現可能なコードが以下です。
App.jsx
import { Select } from "semantic-ui-react";
const dataList = [
{ id: "0", name: "ALL STARS" },
{ id: "1", name: "Special Team No.1" },
{ id: "2", name: "Team No.2" },
{ id: "3", name: "Team No.3" },
];
export default function App() {
const options = dataList.map(x => {
return { key: x.id, value: x.id, text: x.name };
});
options.unshift({ key: 0, value: 0, text: "Select..." });
return (
<Select search options={options} defaultValue={0} />
);
}
これをもとに、いろいろ動かして、原因っぽいものを列挙すると以下になります。
1. keyやvalueに型が違うだけの同じ値がある
"Select..."の値を-1とかに変えると再現しないので
options[0] = { key: 0, value: 0, text: "Select..." };
options[1] = { key: "0", value: "0", text: "ALL STARS" };
2. 1の2つと、それ以外を合わせた3つ以上に同じ文字が含まれている
今回は"S"や"T"です。
"A"や"O"などはでは再現しません。
"s"で紐づくもの
options[0] = { key: 0, value: 0, text: "Select..." };
options[1] = { key: "0", value: "0", text: "ALL STARS" };
options[2] = { key: "1", value: "1", text: "Special Team No.1" };
"t"で紐づくもの
options[0] = { key: 0, value: 0, text: "Select..." };
options[1] = { key: "0", value: "0", text: "ALL STARS" };
options[2] = { key: "1", value: "1", text: "Special Team No.1" };
options[2] = { key: "2", value: "2", text: "Team No.2" };
options[2] = { key: "3", value: "3", text: "Team No.3" };
"L"では再現しないため、もう少し条件がありそうです。
"Special Team No.1"のlの後ろに入っているのが半角スペース（記号）なところが怪しいです。
3. search属性を使っている
値の検索で起きているので、条件には必須かなと。
対策
一番簡単なのは、keyやvalueに、型変換した場合に同じ値が入らないようにすることです。
- options.unshift({ key: 0, value: 0, text: "select..." });
+ options.unshift({ key: "-1", value: "-1", text: "select..." });
とりあえず今回はこれで回避しました。