fix: force default values

webapp/IronCalc/src/components/SheetTabBar/SheetTabBar.tsx

@@ -23,6 +23,8 @@ export interface SheetTabBarProps {
   onSheetDeleted: () => void;
   onHideSheet: () => void;
   onOpenWorkbookSettings: () => void;
+  initialLocale: string;
+  initialTimezone: string;
 }
 
 function SheetTabBar(props: SheetTabBarProps) {
@@ -124,6 +126,8 @@ function SheetTabBar(props: SheetTabBarProps) {
       <WorkbookSettingsDialog
         open={workbookSettingsOpen}
         onClose={() => setWorkbookSettingsOpen(false)}
+        initialLocale={props.initialLocale}
+        initialTimezone={props.initialTimezone}
       />
     </Container>
   );

webapp/IronCalc/src/components/WorkbookSettings/WorkbookSettingsDialog.tsx

@@ -16,18 +16,30 @@ import { theme } from "../../theme";
 type WorkbookSettingsDialogProps = {
   open: boolean;
   onClose: () => void;
-  initialLocale?: string;
+  initialLocale: string;
-  initialTimezone?: string;
+  initialTimezone: string;
   onSave?: (locale: string, timezone: string) => void;
 };
 
 const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
   const { t } = useTranslation();
+  const locales = ["en-US", "en-GB", "de-DE", "fr-FR", "es-ES"];
+  const timezones = [
+    "Berlin, Germany (GMT+1)",
+    "New York, USA (GMT-5)",
+    "Tokyo, Japan (GMT+9)",
+    "London, UK (GMT+0)",
+    "Sydney, Australia (GMT+10)",
+  ];
   const [selectedLocale, setSelectedLocale] = useState<string>(
-    properties.initialLocale || "",
+    properties.initialLocale && locales.includes(properties.initialLocale)
+      ? properties.initialLocale
+      : locales[0],
   );
   const [selectedTimezone, setSelectedTimezone] = useState<string>(
-    properties.initialTimezone || "",
+    properties.initialTimezone && timezones.includes(properties.initialTimezone)
+      ? properties.initialTimezone
+      : timezones[0],
   );
 
   const handleSave = () => {
@@ -37,15 +49,17 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
     properties.onClose();
   };
 
-  const timezones = [
+  // Ensure selectedLocale is always a valid locale
-    "Berlin, Germany (GMT+1)",
+  const validSelectedLocale =
-    "New York, USA (GMT-5)",
+    selectedLocale && locales.includes(selectedLocale)
-    "Tokyo, Japan (GMT+9)",
+      ? selectedLocale
-    "London, UK (GMT+0)",
+      : locales[0];
-    "Sydney, Australia (GMT+10)",
-  ];
 
-  const locales = ["en-US", "en-GB", "de-DE", "fr-FR", "es-ES"];
+  // Ensure selectedTimezone is always a valid timezone
+  const validSelectedTimezone =
+    selectedTimezone && timezones.includes(selectedTimezone)
+      ? selectedTimezone
+      : timezones[0];
 
   return (
     <StyledDialog
@@ -85,11 +99,10 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
           <FormControl fullWidth>
             <StyledSelect
               id="locale"
-              value={selectedLocale}
+              value={validSelectedLocale}
               onChange={(event) => {
                 setSelectedLocale(event.target.value as string);
               }}
-              displayEmpty
               MenuProps={{
                 PaperProps: {
                   sx: menuPaperStyles,
@@ -99,18 +112,15 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
                 },
               }}
             >
-              {locales.map((locale) => {
+              {locales.map((locale) => (
-                const isSelected = locale === selectedLocale;
+                <StyledMenuItem
-                return (
+                  key={locale}
-                  <StyledMenuItem
+                  value={locale}
-                    key={locale}
+                  $isSelected={locale === selectedLocale}
-                    value={locale}
+                >
-                    $isSelected={isSelected}
+                  {locale}
-                  >
+                </StyledMenuItem>
-                    {locale}
+              ))}
-                  </StyledMenuItem>
-                );
-              })}
             </StyledSelect>
             <HelperBox>
               <Row>
@@ -139,24 +149,21 @@ const WorkbookSettingsDialog = (properties: WorkbookSettingsDialogProps) => {
           <FormControl fullWidth>
             <StyledAutocomplete
               id="timezone"
-              value={selectedTimezone}
+              value={validSelectedTimezone}
               onChange={(_event, newValue) => {
                 setSelectedTimezone((newValue as string) || "");
               }}
               options={timezones}
               renderInput={(params) => <TextField {...params} />}
-              renderOption={(props, option) => {
+              renderOption={(props, option) => (
-                const isSelected = option === selectedTimezone;
+                <StyledMenuItem
-                return (
+                  {...props}
-                  <StyledMenuItem
+                  key={option as string}
-                    {...props}
+                  $isSelected={option === validSelectedTimezone}
-                    key={option as string}
+                >
-                    $isSelected={isSelected}
+                  {option as string}
-                  >
+                </StyledMenuItem>
-                    {option as string}
+              )}
-                  </StyledMenuItem>
-                );
-              }}
               disableClearable
               slotProps={{
                 paper: {