Drop the workaround

web/apps/photos/src/components/Sidebar/Preferences.tsx

@@ -1,7 +1,6 @@
 import { MenuItemGroup, MenuSectionTitle } from "@/base/components/Menu";
 import {
     NestedSidebarDrawer,
-    SidebarDrawer,
     type NestedSidebarDrawerVisibilityProps,
 } from "@/base/components/mui/SidebarDrawer";
 import { Titlebar } from "@/base/components/Titlebar";
@@ -18,7 +17,7 @@ import { syncSettings } from "@/new/photos/services/settings";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
 import ChevronRight from "@mui/icons-material/ChevronRight";
 import ScienceIcon from "@mui/icons-material/Science";
-import { Box, DialogProps, Stack } from "@mui/material";
+import { Box, Stack } from "@mui/material";
 import DropdownInput from "components/DropdownInput";
 import { t } from "i18next";
 import React, { useEffect } from "react";
@@ -48,24 +47,10 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
         onRootClose();
     };
 
-    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
-        console.log(reason);
-        if (reason === "backdropClick") {
-            handleRootClose();
-        } else {
-            onClose();
-        }
-    };
-
     return (
-        <SidebarDrawer
-            transitionDuration={0}
-            open={open}
-            onClose={handleDrawerClose}
-            // hideBackdrop
-            // BackdropProps={{
-            //     sx: { "&&&": { backgroundColor: "transparent" } },
-            // }}
+        <NestedSidebarDrawer
+            {...{ open, onClose }}
+            onRootClose={handleRootClose}
         >
             <Stack spacing={"4px"} py={"12px"}>
                 <Titlebar
@@ -116,7 +101,7 @@ export const Preferences: React.FC<NestedSidebarDrawerVisibilityProps> = ({
                 {...mlSettingsVisibilityProps}
                 onRootClose={handleRootClose}
             />
-        </SidebarDrawer>
+        </NestedSidebarDrawer>
     );
 };
 

web/packages/base/components/mui/SidebarDrawer.tsx

@@ -39,17 +39,7 @@ export type NestedSidebarDrawerVisibilityProps = ModalVisibilityProps & {
  */
 export const NestedSidebarDrawer: React.FC<
     NestedSidebarDrawerVisibilityProps & DrawerProps
-> = ({ onClose, onRootClose, ...rest }) => {
-    // Intercept backdrop taps and repurpose them to close the entire stack.
-    const handleClose: DrawerProps["onClose"] = (_, reason) => {
-        if (reason === "backdropClick") {
-            onClose();
-            onRootClose();
-        } else {
-            onClose();
-        }
-    };
-
+> = (props) => (
     // MUI doesn't (currently, AFAIK) have support for nested drawers, so we
     // emulate that by showing a drawer atop another. To make it fit, we need to
     // modify a few knobs:
@@ -60,12 +50,5 @@ export const NestedSidebarDrawer: React.FC<
     // 2. Disable the backdrop (otherwise we'd end up with two of them - one
     //    from the original drawer, and one from this nested one).
     //
-    return (
-        <SidebarDrawer
-            transitionDuration={0}
-            hideBackdrop
-            onClose={handleClose}
-            {...rest}
-        />
+    <SidebarDrawer transitionDuration={0} hideBackdrop {...props} />
 );
-};