From 22e12d69056591e3c32d5ee48f256cac64053b3d Mon Sep 17 00:00:00 2001
From: Bruno Quaresma <bruno@coder.com>
Date: Tue, 30 Aug 2022 18:53:14 +0000
Subject: [PATCH] fix: Use a select when parameter input has many options

---
 .../ParameterInput/ParameterInput.tsx         | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/site/src/components/ParameterInput/ParameterInput.tsx b/site/src/components/ParameterInput/ParameterInput.tsx
index 1d7fc1e244036..a1c3dffffe218 100644
--- a/site/src/components/ParameterInput/ParameterInput.tsx
+++ b/site/src/components/ParameterInput/ParameterInput.tsx
@@ -1,4 +1,5 @@
 import FormControlLabel from "@material-ui/core/FormControlLabel"
+import MenuItem from "@material-ui/core/MenuItem"
 import Radio from "@material-ui/core/Radio"
 import RadioGroup from "@material-ui/core/RadioGroup"
 import { makeStyles } from "@material-ui/core/styles"
@@ -53,23 +54,23 @@ const ParameterField: React.FC<React.PropsWithChildren<ParameterInputProps>> = (
 }) => {
   if (schema.validation_contains && schema.validation_contains.length > 0) {
     return (
-      <RadioGroup
+      <TextField
         id={schema.name}
+        size="small"
         defaultValue={schema.default_source_value}
+        disabled={disabled}
         onChange={(event) => {
           onChange(event.target.value)
         }}
+        select
+        fullWidth
       >
         {schema.validation_contains.map((item) => (
-          <FormControlLabel
-            disabled={disabled}
-            key={item}
-            value={item}
-            control={<Radio color="primary" size="small" disableRipple />}
-            label={item}
-          />
+          <MenuItem key={item} value={item}>
+            {item}
+          </MenuItem>
         ))}
-      </RadioGroup>
+      </TextField>
     )
   }