Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
bryceosterhaus opened this issue Mar 24, 2020 · 0 comments
Open

Comments

@bryceosterhaus
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant