Add label via start adornment w/ workaround

ECN · Nov 17, 2020 · c216a17 · c216a17
1 parent 9979aa8
commit c216a17
Showing 1 changed file with 15 additions and 1 deletion.
diff --git a/src/components/QueueSelector/QueueSelector.js b/src/components/QueueSelector/QueueSelector.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { TextField, Checkbox} from "@material-ui/core";
+import { TextField, Checkbox, InputAdornment } from "@material-ui/core";
 import { Autocomplete } from "@material-ui/lab";
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@material-ui/icons/CheckBox';
@@ -17,6 +17,20 @@ export default function QueueSelector({ queues, selectedQueues, setSelectedQueue
                     <TextField
                         {...params}
                         placeholder={selectedQueues.length === 0 ? "Click or type to select queues." : ""}
+                        // The MUI Autocomplete component uses the InputProps.startAdornment to store chips fpr multi-selection.
+                        // Using InputProps.startAdornment directly will override those chips. Code below is a workaround.
+                        // See: https://github.com/mui-org/material-ui/issues/19479
+                        InputProps={{
+                            ...params.InputProps,
+                            startAdornment: (
+                                <>
+                                    <InputAdornment position="start">
+                                        Active Queues: 
+                                    </InputAdornment>
+                                    {params.InputProps.startAdornment}
+                                </>
+                            ),
+                        }}
                     />
                 );
             }}