【React】React-selectでEnterを押すと、リロードされてしまう

症状

React-selectを使用して、そのコンポーネント上にカーソルがある状態でEnterを押すと、リロードされてしまう事象がありました。

以下がソースです。

react-select

export default function MUIAnimatedMultiSelect({ placeholederText, setCity, city, onkeyPress }) {
  const classes = useStyles();

  function handleChange(value) {
    setCity(value);
  }

return (
    <Fragment>
      <form className={classes.root} noValidate autoComplete="off">
        <InputLabel id="demo-simple-select-helper-label">提供地域</InputLabel>
        <Select
          labelId="demo-simple-select-label"
          id="demo-simple-select"
          label="提供地域"
          options={options}
          placeholder={placeholederText}
          defaultValue={{ label: city, value: city }}
          onChange={(event) => { handleChange(event.value) }}
          variant="outlined"
          onKeyDown={(event) => {
            event.preventDefault();
            if (event.key === 'Enter') {
              event.preventDefault();
              onkeyPress(event)
            }
          }
          }
        >
        </Select>
      </form>
    </Fragment>
  );
}

解決方法

MUIとは違い、react-selectではonKeyDownではなく、onKeyPressに対応しているようです。 onKeyPressに変更して、event.preventDefault();を挿入することで解決しました。

react-select

        <Select
          onKeyDown={(event) => {
            event.preventDefault();
            if (event.key === 'Enter') {
              event.preventDefault();
              onkeyPress(event)
            }
          })
        }
        >
        </Select>

参考