Fix the CashFlow report crash because of the new CustomSelect (#1325)

packages/desktop-client/src/components/common/CustomSelect.tsx

@@ -12,22 +12,39 @@ import ExpandArrow from '../../icons/v0/ExpandArrow';
 type CustomSelectProps = {
   options: Array<[string, string]>;
   value: string;
+  defaultLabel?: string;
   onChange?: (newValue: string) => void;
   style?: CSSProperties;
   wrapperStyle?: CSSProperties;
   disabledKeys?: string[];
 };
 
+/**
+ * @param {Array<[string, string]>} options - An array of options value-label pairs.
+ * @param {string} value - The currently selected option value.
+ * @param {string} [defaultLabel] - The label to display when the selected value is not in the options.
+ * @param {function} [onChange] - A callback function invoked when the selected value changes.
+ * @param {CSSProperties} [style] - Custom styles to apply to the selected button.
+ * @param {CSSProperties} [wrapperStyle] - Custom style to apply to the select wrapper.
+ * @param {string[]} [disabledKeys] - An array of option values to disable.
+ *
+ * @example
+ * // Usage:
+ * // <CustomSelect options={[['1', 'Option 1'], ['2', 'Option 2']]} value="1" onChange={handleOnChange} />
+ * // <CustomSelect options={[['1', 'Option 1'], ['2', 'Option 2']]} value="3" defaultLabel="Select an option"  onChange={handleOnChange} />
+ */
+
 export default function CustomSelect({
   options,
   value,
+  defaultLabel = '',
   onChange,
   style,
   wrapperStyle,
   disabledKeys = [],
 }: CustomSelectProps) {
   const arrowSize = 7;
-  const label = options.filter(option => option[0] === value)[0][1];
+  const targetOption = options.filter(option => option[0] === value);
   return (
     <ListboxInput
       value={value}
@@ -52,7 +69,7 @@ export default function CustomSelect({
             alignItems: 'center',
           }}
         >
-          {label}
+          {targetOption.length !== 0 ? targetOption[0][1] : defaultLabel}
         </span>
       </ListboxButton>
       <ListboxPopover style={{ zIndex: 10000, outline: 0, borderRadius: 4 }}>

packages/desktop-client/src/components/reports/Header.js

@@ -96,6 +96,7 @@ function Header({
               onChangeDates(...validateStart(allMonths, newValue, end))
             }
             value={start}
+            defaultLabel={monthUtils.format(start, 'MMMM, yyyy')}
             options={allMonths.map(({ name, pretty }) => [name, pretty])}
           />
           <View>to</View>

upcoming-release-notes/1325.md

+---
+category: Bugfix
+authors: [aleetsaiya]
+---
+
+Fix the CashFlow report crash because of the new CustomSelect
\ No newline at end of file