react-live icon indicating copy to clipboard operation
react-live copied to clipboard

<select>'s onChange event doesn't include items that are selected.

Open bryceosterhaus opened this issue 5 years ago • 0 comments

I have this demo working fine in a normal react environment, but when I try it in react-live, it behaves differently.

Working fine in codesandbox

Now when I try this code snippet in the react-live demo, it doesnt allow selecting items,

() => {
  const selectBoxItems = [
    {
      label: "Reddit",
      value: "reddit"
    },
    {
      label: "Slack",
      value: "slack"
    },
    {
      label: "Twitter",
      value: "twitter"
    }
  ];

  const [selected, setSelected] = React.useState([]);

  return (
    <select
      multiple={true}
      onChange={event => {
        const selectedItems = [...event.target.options]
          .filter(({ selected }) => selected)
          .map(item => item.value);

        setSelected(selectedItems);
      }}
      value={selected}
    >
      {selectBoxItems.map(option => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
};

This was tested in Chrome.

bryceosterhaus avatar Mar 24 '20 19:03 bryceosterhaus