Clear Release Code Number when Release Code Type is NONE_OPTION

apps/studio/src/pages/home/uploadSong/AdvancedSongDetails.tsx

@@ -3,12 +3,13 @@ import { useFormikContext } from "formik";
 import { Box, Link, Stack } from "@mui/material";
 import { scrollToError, useWindowDimensions } from "@newm-web/utils";
 import {
+  Button,
   CopyrightInputField,
   DropdownSelectField,
+  HorizontalLine,
   SwitchInputField,
   TextInputField,
 } from "@newm-web/elements";
-import { Button, HorizontalLine } from "@newm-web/elements";
 import theme from "@newm-web/theme";
 import {
   UploadSongRequest,
@@ -52,6 +53,12 @@ const AdvancedSongDetails = () => {
     .toISOString()
     .split("T")[0];
 
+  useEffect(() => {
+    if (values.barcodeType === NONE_OPTION || values.barcodeType === "") {
+      setFieldValue("barcodeNumber", "");
+    }
+  }, [setFieldValue, values.barcodeType]);
+
   useEffect(() => {
     scrollToError(errors, isSubmitting, [
       {

packages/elements/src/lib/DropdownSelect.tsx

@@ -1,36 +1,26 @@
 import {
-  FocusEvent,
   ForwardRefRenderFunction,
   ForwardedRef,
-  HTMLProps,
   KeyboardEvent,
   MouseEventHandler,
+  SyntheticEvent,
   forwardRef,
 } from "react";
 import { useAutocomplete } from "@mui/base/useAutocomplete";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import theme from "@newm-web/theme";
 import { Box } from "@mui/material";
-import { WidthType } from "@newm-web/utils";
 import TextInput from "./TextInput";
 import ResultsList from "./styled/ResultsList";
 import NoResultsText from "./styled/NoResultsText";
+import { DropdownSelectFieldProps } from "./form/DropdownSelectField";
 
-export interface DropdownSelectProps
-  extends Omit<HTMLProps<HTMLInputElement>, "as" | "ref"> {
-  readonly disabled?: boolean;
+interface DropdownSelectProps extends DropdownSelectFieldProps {
   readonly errorMessage?: string;
-  readonly handleBlur?: (event: FocusEvent<HTMLInputElement, Element>) => void;
-  readonly handleChange?: (newValue: string) => void;
-  readonly isOptional?: boolean;
-  readonly label?: string;
-  readonly name: string;
-  readonly noResultsText?: string;
-  readonly options: ReadonlyArray<string>;
-  readonly placeholder?: string;
-  readonly tags?: ReadonlyArray<string>;
-  readonly tooltipText?: string;
-  readonly widthType?: WidthType;
+  readonly onChange?: (
+    event: SyntheticEvent<Element, Event>,
+    newValue: string
+  ) => void;
 }
 
 const DropdownSelect: ForwardRefRenderFunction<
@@ -40,8 +30,7 @@ const DropdownSelect: ForwardRefRenderFunction<
   {
     disabled,
     errorMessage,
-    handleChange,
-    handleBlur,
+    onChange,
     label,
     name,
     noResultsText = "Nothing found",
@@ -65,17 +54,14 @@ const DropdownSelect: ForwardRefRenderFunction<
   } = useAutocomplete({
     clearOnBlur: true,
     getOptionLabel: (option) => option,
-
     id: name,
-
     // Removes warning for empty string not being a valid option
     isOptionEqualToValue: (option, value) =>
       value === "" ? true : option === value,
     onChange: (event, newValue) => {
       // Updates as empty string instead of invalid null error for empty field
       // or for partial edit of selected input causing invalid undefined error
-      if (newValue === null || newValue === undefined) handleChange?.("");
-      else handleChange?.(newValue as string);
+      onChange?.(event, newValue ?? "");
     },
     options,
     value: value as string,
@@ -95,14 +81,6 @@ const DropdownSelect: ForwardRefRenderFunction<
     if (event.key === "Enter" && inputValue !== value) event.preventDefault();
   };
 
-  /**
-   * Consolidates onBlur events for Formik Field and MUI's useAutocomplete.
-   */
-  const handleBlurEvents = (event: FocusEvent<HTMLInputElement, Element>) => {
-    handleBlur?.(event);
-    inputProps.onBlur?.(event);
-  };
-
   return (
     <Box
       sx={ {
@@ -133,7 +111,6 @@ const DropdownSelect: ForwardRefRenderFunction<
           label={ label }
           name={ name }
           placeholder={ placeholder }
-          onBlur={ handleBlurEvents }
           onKeyDown={ preventFormSubmit }
         />
       </div>

packages/elements/src/lib/form/DropdownMultiSelectField.tsx

@@ -1,11 +1,11 @@
 import { ForwardRefRenderFunction, SyntheticEvent, forwardRef } from "react";
 import { Field, FieldProps } from "formik";
+import { DropdownSelectFieldProps } from "./DropdownSelectField";
 import DropdownMultiSelect from "../DropdownMultiSelect";
-import { DropdownSelectProps } from "../DropdownSelect";
 
 const DropdownMultiSelectField: ForwardRefRenderFunction<
   HTMLInputElement,
-  DropdownSelectProps
+  DropdownSelectFieldProps
 > = (props, ref) => (
   <Field name={ props.name }>
     { ({ field, form, meta }: FieldProps) => (

packages/elements/src/lib/form/DropdownSelectField.tsx

@@ -1,23 +1,40 @@
-import { ForwardRefRenderFunction, forwardRef } from "react";
+import { ForwardRefRenderFunction, HTMLProps, forwardRef } from "react";
 import { Field, FieldProps } from "formik";
-import DropdownSelect, { DropdownSelectProps } from "../DropdownSelect";
+import { WidthType } from "@newm-web/utils";
+import DropdownSelect from "../DropdownSelect";
+
+export interface DropdownSelectFieldProps
+  extends Omit<HTMLProps<HTMLInputElement>, "as" | "ref" | "onChange"> {
+  readonly disabled?: boolean;
+  readonly isOptional?: boolean;
+  readonly label?: string;
+  readonly name: string;
+  readonly noResultsText?: string;
+  readonly options: ReadonlyArray<string>;
+  readonly placeholder?: string;
+  readonly tooltipText?: string;
+  readonly widthType?: WidthType;
+}
 
 const DropdownSelectField: ForwardRefRenderFunction<
   HTMLInputElement,
-  DropdownSelectProps
-> = (props, ref) => (
-  <Field name={ props.name }>
-    { ({ field, form, meta }: FieldProps) => (
-      <DropdownSelect
-        { ...field }
-        { ...props }
-        errorMessage={ meta.touched ? meta.error : "" }
-        handleBlur={ form.handleBlur }
-        handleChange={ form.handleChange(props.name) }
-        ref={ ref }
-      />
-    ) }
-  </Field>
-);
+  DropdownSelectFieldProps
+> = (props, ref) => {
+  return (
+    <Field name={ props.name }>
+      { ({ field, form, meta }: FieldProps) => (
+        <DropdownSelect
+          { ...field }
+          { ...props }
+          errorMessage={ meta.touched ? meta.error : "" }
+          ref={ ref }
+          onChange={ (event, newValue) => {
+            form.handleChange(props.name)(newValue);
+          } }
+        />
+      ) }
+    </Field>
+  );
+};
 
 export default forwardRef(DropdownSelectField);