diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
index c17c7c9..01a605b 100644
--- a/src/components/QueueSelector/QueueSelector.js
+++ b/src/components/QueueSelector/QueueSelector.js
@@ -6,46 +6,50 @@ import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
export default function QueueSelector({ queues, selectedQueues, setSelectedQueues }) {
+
+ const handleChange = (event, newValue) => {
+ setSelectedQueues(newValue)
+ };
+
+ const optionRenderer = (option, { selected }) => (
+ <>
+ }
+ checkedIcon={}
+ style={{ marginRight: 8 }}
+ checked={selected}
+ />
+ {`${option.name} (${option.number_of_items})`}
+ >
+ );
+
return(
(
+
+
+ Active Queues:
+
+ {params.InputProps.startAdornment}
+ >
+ ),
+ }}
+ />
+ )}
+
options={queues}
- onChange={(event, newValue) => {
- setSelectedQueues(newValue)
- }}
- renderInput={(params) => {
- return(
-
-
- Active Queues:
-
- {params.InputProps.startAdornment}
- >
- ),
- }}
- />
- );
- }}
+ onChange={handleChange}
getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
- renderOption={(option, { selected }) => (
- <>
- }
- checkedIcon={}
- style={{ marginRight: 8 }}
- checked={selected}
- />
- {`${option.name} (${option.number_of_items})`}
- >
- )}
+ renderOption={optionRenderer}
getOptionSelected={ (option, value) => option.name === value.name }
disableCloseOnSelect
disableListWrap