Skip to content

Commit d623b3f

Browse files
ChetanFTWChetanFTW
committed
Fix: Sticky Behavior for currency Dropdown #6951
Signed-off-by: ChetanFTW <devchetan42@gmail.com>
1 parent c4bdbad commit d623b3f

1 file changed

Lines changed: 90 additions & 47 deletions

File tree

‎src/sections/Pricing/index.js‎

Lines changed: 90 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from "react";
1+
import React, { useState, useEffect } from "react";
22
import PricingWrapper from "./pricing.style";
33
import Comparison from "./comparison";
44
import FAQ from "../General/Faq";
@@ -42,58 +42,101 @@ const getCustomToggleButtonStyle = (isActive, baseStyle) => ({
4242
});
4343

4444
export const CurrencySelect = ({ currency, setCurrency }) => {
45+
const [open, setOpen] = useState(false);
46+
47+
// Lock both <html> and <body> while the dropdown is open
48+
useEffect(() => {
49+
if (!open) return;
50+
const prevBody = document.body.style.overflow;
51+
const prevHtml = document.documentElement.style.overflow;
52+
document.body.style.overflow = "hidden";
53+
document.documentElement.style.overflow = "hidden";
54+
return () => {
55+
document.body.style.overflow = prevBody;
56+
document.documentElement.style.overflow = prevHtml;
57+
};
58+
}, [open]);
59+
60+
const handleClose = () => setOpen(false);
61+
const handleOpen = () => setOpen(true);
62+
4563
return (
46-
<FormControl
47-
variant="outlined"
48-
size="small"
49-
sx={{
50-
minWidth: 150,
51-
"& .MuiInputLabel-root": {
52-
color: "white",
53-
"&.Mui-focused": { color: "#00B39F" },
54-
},
55-
"& .MuiOutlinedInput-root": {
56-
color: "white",
57-
"& .MuiSelect-icon": { color: "white" },
58-
"& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
59-
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
60-
borderColor: "#00B39F",
64+
<>
65+
{/* Transparent overlay: blocks the page & closes on outside click */}
66+
{open && (
67+
<Box
68+
onMouseDown={handleClose}
69+
onTouchStart={handleClose}
70+
sx={{
71+
position: "fixed",
72+
inset: 0,
73+
zIndex: 1299, // below MUI Menu (paper is set to 1301)
74+
}}
75+
/>
76+
)}
77+
78+
<FormControl
79+
variant="outlined"
80+
size="small"
81+
sx={{
82+
minWidth: 150,
83+
"& .MuiInputLabel-root": {
84+
color: "white",
85+
"&.Mui-focused": { color: "#00B39F" },
86+
},
87+
"& .MuiOutlinedInput-root": {
88+
color: "white",
89+
"& .MuiSelect-icon": { color: "white" },
90+
"& .MuiOutlinedInput-notchedOutline": { borderColor: "white" },
91+
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
92+
borderColor: "#00B39F",
93+
},
6194
},
62-
},
63-
"&:hover": {
64-
"& .MuiInputLabel-root": { color: "#00B39F" },
65-
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
66-
borderColor: "#00B39F",
67-
borderWidth: "2px",
95+
"&:hover": {
96+
"& .MuiInputLabel-root": { color: "#00B39F" },
97+
"& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
98+
borderColor: "#00B39F",
99+
borderWidth: "2px",
100+
},
68101
},
69-
},
70-
}}
71-
>
72-
<InputLabel id="currency-selector-label">Currency</InputLabel>
73-
<Select
74-
labelId="currency-selector-label"
75-
value={currency}
76-
onChange={(e) => {
77-
setCurrency(e.target.value);
78102
}}
79-
label="Currency"
80-
renderValue={(value) => (
81-
<Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
82-
<Typography variant="body1">{Currencies[value]?.symbol}</Typography>
83-
<Typography variant="body2">{Currencies[value]?.name}</Typography>
84-
</Box>
85-
)}
86103
>
87-
{Object.entries(Currencies).map(([code, { symbol, name }]) => (
88-
<MenuItem key={code} value={code}>
89-
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
90-
<Typography variant="body1">{symbol}</Typography>
91-
<Typography variant="body2">{name}</Typography>
104+
<InputLabel id="currency-selector-label">Currency</InputLabel>
105+
<Select
106+
labelId="currency-selector-label"
107+
value={currency}
108+
label="Currency"
109+
open={open}
110+
onOpen={handleOpen}
111+
onClose={handleClose}
112+
onChange={(e) => {
113+
setCurrency(e.target.value);
114+
handleClose();
115+
}}
116+
MenuProps={{
117+
disableScrollLock: false,
118+
keepMounted: true,
119+
PaperProps: { sx: { zIndex: 1301 } }, // ensure menu is above overlay
120+
ModalProps: { keepMounted: true, disableScrollLock: false },
121+
}}
122+
renderValue={(value) => (
123+
<Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
124+
<Typography variant="body1">{Currencies[value]?.symbol}</Typography>
125+
<Typography variant="body2">{Currencies[value]?.name}</Typography>
92126
</Box>
93-
</MenuItem>
94-
))}
95-
</Select>
96-
</FormControl>
127+
)}
128+
>
129+
{Object.entries(Currencies).map(([code, { symbol, name }]) => (
130+
<MenuItem key={code} value={code}>
131+
<Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
132+
<Typography variant="body1">{symbol}</Typography>
133+
<Typography variant="body2">{name}</Typography>
134+
</Box>
135+
</MenuItem>
136+
))}
137+
</Select>
138+
</FormControl>
139+
</>
97140
);
98141
};
99142

0 commit comments

Comments
 (0)