Merge branch 'master' of https://github.com/brown-dash/Dash-Web into nathan-starter

1 files changed, 6 insertions, 16 deletions

diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index 5701a22c0..9d0817a06 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -1,8 +1,6 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button, IconButton, Size, Type } from 'browndash-components';
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import Select from 'react-select';
@@ -31,7 +29,7 @@ export interface UserOptions {
 }
 
 @observer
-export class GroupManager extends ObservableReactComponent<{}> {
+export class GroupManager extends ObservableReactComponent<object> {
     // eslint-disable-next-line no-use-before-define
     static Instance: GroupManager;
     @observable isOpen: boolean = false; // whether the GroupManager is to be displayed or not.
@@ -44,7 +42,7 @@ export class GroupManager extends ObservableReactComponent<{}> {
     @observable private buttonColour: '#979797' | 'black' = '#979797';
     @observable private groupSort: 'ascending' | 'descending' | 'none' = 'none';
 
-    constructor(props: Readonly<{}>) {
+    constructor(props: Readonly<object>) {
         super(props);
         makeObservable(this);
         GroupManager.Instance = this;
@@ -227,15 +225,6 @@ export class GroupManager extends ObservableReactComponent<{}> {
     }
 
     /**
-     * Handles changes in the users selected in the "Select users" dropdown.
-     * @param selectedOptions
-     */
-    @action
-    handleChange = (selectedOptions: any) => {
-        this.selectedUsers = selectedOptions as UserOptions[];
-    };
-
-    /**
      * Creates the group when the enter key has been pressed (when in the input).
      * @param e
      */
@@ -309,7 +298,6 @@ export class GroupManager extends ObservableReactComponent<{}> {
                     <input
                         ref={this.inputRef}
                         onKeyDown={this.handleKeyDown}
-                        // eslint-disable-next-line jsx-a11y/no-autofocus
                         autoFocus
                         type="text"
                         placeholder="Group name"
@@ -323,7 +311,9 @@ export class GroupManager extends ObservableReactComponent<{}> {
                         className="select-users"
                         isMulti
                         options={this.options}
-                        onChange={this.handleChange}
+                        onChange={selectedOptions => {
+                            runInAction(() => (this.selectedUsers = Array.from(selectedOptions)));
+                        }}
                         placeholder="Select users"
                         value={this.selectedUsers}
                         closeMenuOnSelect={false}