Changed Autocomplete loading prop value to be same as loading variable value; Changed noOptionsText to be more specific

src/components/QueueSelector/QueueSelector.js

@@ -31,6 +31,7 @@ const getQueueCounts = async (access_token) => {
 export default function QueueSelector({ open, setOpen, value, setValue }) {
     const [queueCounts, setQueueCounts] = useState([]);
     const [isFirstRender, setIsFirstRender] = useState(true);
+    const [searchValue, setSearchValue] = useState("");
     const access_token = useToken();
     const loading = open && queueCounts.length === 0;
 
@@ -39,11 +40,11 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
 
     const theme = useTheme();
     const useStyles = makeStyles({
-		Paper_root: {
+        Paper_root: {
             margin: theme.spacing(1)
         }
-	});
-	const classes = useStyles();
+    });
+    const classes = useStyles();
 
     // Prepopulate Active Queues from Cookies
     useEffect( _ => {
@@ -152,14 +153,16 @@ export default function QueueSelector({ open, setOpen, value, setValue }) {
                 options={queueCounts}
                 value={value}
                 onChange={handleChange}
+                onInputChange={(event, value, reason) => setSearchValue(value)}
                 getOptionLabel={(option) => `${option.name} (${option.number_of_items})`}
                 renderOption={optionRenderer}
                 getOptionSelected={ (option, value) => option.name === value.name }
+                noOptionsText={`'${searchValue}' queue does not exist.`}
                 size="small"
                 open={open}
                 onOpen={_ => setOpen(true)}
                 onClose={_ => setOpen(false)}
-                loading={true}
+                loading={loading}
                 disableCloseOnSelect
                 disableListWrap
                 fullWidth