frontend: Add noDefault flag to Select component (#2958)

Scope: Adding a noDefault flag to the Select component to avoid
triggering the onChange method on component did update for when we don't
want the first option in the list to be set as default.

frontend/packages/core/src/Input/select.tsx

@@ -251,6 +251,7 @@ export interface SelectProps extends Pick<MuiSelectProps, "disabled" | "error" |
   name: string;
   options: SelectOption[];
   onChange?: (value: string) => void;
+  noDefault?: boolean;
 }
 
 const Select = ({
@@ -263,6 +264,7 @@ const Select = ({
   options,
   onChange,
   value,
+  noDefault,
 }: SelectProps) => {
   // Flattens all options and sub grouped options for easier retrieval
   const flatOptions: BaseSelectOptions[] = flattenBaseSelectOptions(options);
@@ -276,7 +278,7 @@ const Select = ({
   );
 
   React.useEffect(() => {
-    if (flatOptions.length !== 0) {
+    if (flatOptions.length !== 0 && !noDefault) {
       onChange && onChange(flatOptions[selectedIdx]?.value || flatOptions[selectedIdx].label);
     }
   }, []);

frontend/packages/core/src/Input/tests/select.test.tsx

@@ -17,6 +17,17 @@ test("select has lower bound", () => {
   expect(container.querySelector("#foobar-select")).toHaveTextContent("foo");
 });
 
+test("select doesn't have default value when rendered", () => {
+  const { container } = render(
+    <ThemeProvider>
+      <Select name="foobar" value="" options={[{ label: "foo" }, { label: "bar" }]} noDefault />
+    </ThemeProvider>
+  );
+
+  expect(container.querySelector("#foobar-select")).toBeInTheDocument();
+  expect(container.querySelector("#foobar-select")).not.toHaveTextContent("foo");
+});
+
 test("select has upper bound", () => {
   const { container } = render(
     <ThemeProvider>