I'm working on a permissions system to let users control who can access/comment/edit a resource, much like what you can find on Google Drive. I'm using a React-Select multi to let the owner of the resource pick users he wants to give access to the resource to.
When I click on an option displayed by react-select, I want this option to be added to my list of allowed users (a list that is handled by another component). This part works, I just used an onChange handler on the select (as you can see on the code below).
export default class AddUsersForm extends Component {
PropTypes = {
onSubmit: PropTypes.func.isRequired,
usersList: PropTypes.array.isRequired, // List of all users in the company
usersInPermissions: PropTypes.array.isRequired, // Users who already have access to the resource
}
handleChange(users){
// Adds new user to the list of allowed users, an updated value for this.props.usersInPermissions will be received
this.props.onSubmit(users);
}
render() {
return (
<form>
<Select
name="users"
multi={true}
options={this.props.usersList.filter(user => !this.props.usersInPermissions.includes(user.id))}
onChange={(users) => this.handleChange(users)}
/>
</form>
);
}
}
This is where I am stuck: once the option has been added, I would like to keep displaying the filter that the user was potentially using while searching for the first option in the text field. The way it works now, the filter is removed and all the options are shown in the dropdown.
Is there any simple way of achieving this with React-Select?
Many thanks!
My way:
Option
component with own component (several components from Material-UI library).onClick
event handler - here is some logic and callonChange
handler from ReactSelect props. At the end of theonClick
handler addedevent.stopPropagation()
This code is working. Maybe there are better ways.
If you want to keep the typed text then you have to set the text of the input on the handleChange. There is no build in function to keep the typed text.