Skip to content

Commit be08147

Browse files
YASHMAHAKALYASHMAHAKAL
committed
fix: resolve floating UI dropdowns on scroll
Signed-off-by: YASHMAHAKAL <yvsst01@gmail.com>
1 parent c0463ae commit be08147

File tree

6 files changed

+39
-20
lines changed

6 files changed

+39
-20
lines changed

‎src/components/Pricing/PricingAddons/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,10 @@ export const PricingAddons = ({ isYearly = false, setIsYearly, currency, enterpr
237237
value={selectedAddon?.id || ""}
238238
onChange={(e) => handleAddonChange(e.target.value)}
239239
label="Optionally, choose one or more add-ons"
240+
MenuProps={{
241+
disableScrollLock: true,
242+
marginThreshold: null,
243+
}}
240244
>
241245
{addOns.map((addon) => (
242246
<MenuItem key={addon.id} value={addon.id}>

‎src/sections/Pricing/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@ export const CurrencySelect = ({ currency, setCurrency }) => {
7777
setCurrency(e.target.value);
7878
}}
7979
label="Currency"
80+
MenuProps={{
81+
disableScrollLock: true,
82+
marginThreshold: null,
83+
}}
8084
renderValue={(value) => (
8185
<Box sx={{ display: "flex", alignItems: "center", gap: 1, color: "#fff" }}>
8286
<Typography variant="body1">{Currencies[value]?.symbol}</Typography>

‎src/sections/Projects/Sistent/components/select/code.js‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ const SelectCode = () => {
174174
<div className="showcase">
175175
<div className="items">
176176
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
177-
<Select defaultValue={10}>
177+
<Select defaultValue={10} MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
178178
<MenuItem value={10}>Ten</MenuItem>
179179
<MenuItem value={20}>Twenty</MenuItem>
180180
<MenuItem value={30}>Thirty</MenuItem>
@@ -190,7 +190,7 @@ const SelectCode = () => {
190190
<div className="showcase">
191191
<div className="items">
192192
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
193-
<Select defaultValue={10} variant="filled">
193+
<Select defaultValue={10} variant="filled" MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
194194
<MenuItem value={10}>Ten</MenuItem>
195195
<MenuItem value={20}>Twenty</MenuItem>
196196
<MenuItem value={30}>Thirty</MenuItem>
@@ -203,7 +203,7 @@ const SelectCode = () => {
203203
<div className="showcase">
204204
<div className="items">
205205
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
206-
<Select defaultValue={10} variant="standard">
206+
<Select defaultValue={10} variant="standard" MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
207207
<MenuItem value={10}>Ten</MenuItem>
208208
<MenuItem value={20}>Twenty</MenuItem>
209209
<MenuItem value={30}>Thirty</MenuItem>
@@ -231,7 +231,7 @@ const SelectCode = () => {
231231
<div className="showcase">
232232
<div className="items">
233233
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
234-
<Select defaultValue={10} autoWidth>
234+
<Select defaultValue={10} autoWidth MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
235235
<MenuItem value={10}>Ten</MenuItem>
236236
<MenuItem value={20}>Twenty</MenuItem>
237237
<MenuItem value={30}>Thirty</MenuItem>
@@ -247,7 +247,7 @@ const SelectCode = () => {
247247
<div className="showcase">
248248
<div className="items">
249249
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
250-
<Select defaultValue={10} size="small">
250+
<Select defaultValue={10} size="small" MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
251251
<MenuItem value={10}>Ten</MenuItem>
252252
<MenuItem value={20}>Twenty</MenuItem>
253253
<MenuItem value={30}>Thirty</MenuItem>
@@ -264,7 +264,7 @@ const SelectCode = () => {
264264
<div className="showcase">
265265
<div className="items">
266266
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
267-
<Select defaultValue={10} fullWidth>
267+
<Select defaultValue={10} fullWidth MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
268268
<MenuItem value={10}>Ten</MenuItem>
269269
<MenuItem value={20}>Twenty</MenuItem>
270270
<MenuItem value={30}>Thirty</MenuItem>
@@ -292,6 +292,7 @@ const SelectCode = () => {
292292
labelId="demo-select-label"
293293
id="demo-select"
294294
label="Age"
295+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
295296
>
296297
<MenuItem value={10}>Ten</MenuItem>
297298
<MenuItem value={20}>Twenty</MenuItem>
@@ -307,7 +308,7 @@ const SelectCode = () => {
307308
<div className="items">
308309
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
309310
<FormControl sx={{ width: "200px" }}>
310-
<Select defaultValue={10}>
311+
<Select defaultValue={10} MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
311312
<MenuItem value={10}>Ten</MenuItem>
312313
<MenuItem value={20}>Twenty</MenuItem>
313314
<MenuItem value={30}>Thirty</MenuItem>
@@ -338,6 +339,7 @@ const SelectCode = () => {
338339
}}
339340
value={selectedAge}
340341
displayEmpty
342+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
341343
>
342344
<MenuItem value={10}>Ten</MenuItem>
343345
<MenuItem value={20}>Twenty</MenuItem>
@@ -357,7 +359,7 @@ const SelectCode = () => {
357359
<div className="showcase">
358360
<div className="items">
359361
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
360-
<Select defaultValue={10}>
362+
<Select defaultValue={10} MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
361363
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
362364
<MenuItem value={10}>Ten</MenuItem>
363365
<MenuItem value={20}>Twenty</MenuItem>
@@ -382,12 +384,12 @@ const SelectCode = () => {
382384
<div className="showcase">
383385
<div className="items">
384386
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
385-
<Select disabled defaultValue={10}>
387+
<Select disabled defaultValue={10} MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
386388
<MenuItem value={10}>Ten</MenuItem>
387389
<MenuItem value={20}>Twenty</MenuItem>
388390
<MenuItem value={30}>Thirty</MenuItem>
389391
</Select>
390-
<Select error defaultValue={10}>
392+
<Select error defaultValue={10} MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
391393
<MenuItem value={10}>Ten</MenuItem>
392394
<MenuItem value={20}>Twenty</MenuItem>
393395
<MenuItem value={30}>Thirty</MenuItem>
@@ -408,6 +410,7 @@ const SelectCode = () => {
408410
labelId="demo-select-label-outlined"
409411
id="demo-select-outlined"
410412
label="Age"
413+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
411414
>
412415
<MenuItem value={10}>Ten</MenuItem>
413416
<MenuItem value={20}>Twenty</MenuItem>
@@ -438,6 +441,7 @@ const SelectCode = () => {
438441
input={<OutlinedInput label="Name" />}
439442
value={multipleAges}
440443
onChange={handleMultiplSelect}
444+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
441445
>
442446
<MenuItem value={10}>Ten</MenuItem>
443447
<MenuItem value={20}>Twenty</MenuItem>

‎src/sections/Projects/Sistent/components/select/guidance.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ const SelectGuidance = () => {
5252
labelId="demo-select-label-outlined"
5353
id="demo-select-outlined"
5454
label="Age"
55+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
5556
>
5657
<MenuItem value={10}>Ten</MenuItem>
5758
<MenuItem value={20}>Twenty</MenuItem>
@@ -74,6 +75,7 @@ const SelectGuidance = () => {
7475
id="demo-select-outlined"
7576
label="Age"
7677
renderValue={(value) => `⚠️ - ${value}`}
78+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
7779
>
7880
<MenuItem value={10}>Ten</MenuItem>
7981
<MenuItem value={20}>Twenty</MenuItem>
@@ -96,6 +98,7 @@ const SelectGuidance = () => {
9698
labelId="demo-select-label-outlined"
9799
id="demo-select-outlined"
98100
label="Age"
101+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
99102
>
100103
<MenuItem value={10}>Ten</MenuItem>
101104
<MenuItem value={20}>Twenty</MenuItem>
@@ -134,6 +137,7 @@ const SelectGuidance = () => {
134137
labelId="demo-select-label"
135138
id="demo-select"
136139
label="Age"
140+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
137141
>
138142
<MenuItem value={10}>Ten</MenuItem>
139143
<MenuItem value={20}>Twenty</MenuItem>
@@ -142,7 +146,7 @@ const SelectGuidance = () => {
142146
<FormHelperText>With label + Helper text</FormHelperText>
143147
</FormControl>
144148
<FormControl sx={{ width: "200px" }}>
145-
<Select id="demo-select-without-label">
149+
<Select id="demo-select-without-label" MenuProps={{ disableScrollLock: true, marginThreshold: null }}>
146150
<MenuItem value={10}>Ten</MenuItem>
147151
<MenuItem value={20}>Twenty</MenuItem>
148152
<MenuItem value={30}>Thirty</MenuItem>
@@ -171,6 +175,7 @@ const SelectGuidance = () => {
171175
}}
172176
value={selectedAge}
173177
displayEmpty
178+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
174179
>
175180
<MenuItem value={10}>Ten</MenuItem>
176181
<MenuItem value={20}>Twenty</MenuItem>
@@ -193,6 +198,7 @@ const SelectGuidance = () => {
193198
labelId="demo-select-label-outlined"
194199
id="demo-select-outlined"
195200
label="Age"
201+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
196202
>
197203
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
198204
<MenuItem value={10}>Ten</MenuItem>
@@ -228,6 +234,7 @@ const SelectGuidance = () => {
228234
input={<OutlinedInput label="Name" />}
229235
value={multipleAges}
230236
onChange={handleMultiplSelect}
237+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
231238
>
232239
<MenuItem value={10}>Ten</MenuItem>
233240
<MenuItem value={20}>Twenty</MenuItem>

‎src/sections/Projects/Sistent/components/select/index.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@ const SistentSelect = () => {
5959
labelId="demo-select-label-outlined"
6060
id="demo-select-outlined"
6161
label="Age"
62+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
6263
>
6364
<MenuItem value={10}>Ten</MenuItem>
6465
<MenuItem value={20}>Twenty</MenuItem>
@@ -83,6 +84,7 @@ const SistentSelect = () => {
8384
id="demo-select-filled"
8485
label="Age"
8586
variant="filled"
87+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
8688
>
8789
<MenuItem value={10}>Ten</MenuItem>
8890
<MenuItem value={20}>Twenty</MenuItem>
@@ -105,6 +107,7 @@ const SistentSelect = () => {
105107
id="demo-select-standard"
106108
label="Age"
107109
variant="standard"
110+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
108111
>
109112
<MenuItem value={10}>Ten</MenuItem>
110113
<MenuItem value={20}>Twenty</MenuItem>
@@ -139,6 +142,7 @@ const SistentSelect = () => {
139142
id="demo-select-standard"
140143
label="Age"
141144
autoWidth
145+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
142146
>
143147
<MenuItem value={10}>Ten</MenuItem>
144148
<MenuItem value={20}>Twenty</MenuItem>
@@ -163,6 +167,7 @@ const SistentSelect = () => {
163167
labelId="demo-select-label-standard"
164168
id="demo-select-standard"
165169
label="Age"
170+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
166171
>
167172
<MenuItem value={10}>Ten</MenuItem>
168173
<MenuItem value={20}>Twenty</MenuItem>
@@ -186,6 +191,7 @@ const SistentSelect = () => {
186191
labelId="demo-select-label-standard"
187192
id="demo-select-standard"
188193
label="Age"
194+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
189195
>
190196
<MenuItem value={10}>Ten</MenuItem>
191197
<MenuItem value={20}>Twenty</MenuItem>
@@ -210,6 +216,7 @@ const SistentSelect = () => {
210216
input={<OutlinedInput label="Name" />}
211217
value={multipleAges}
212218
onChange={handleMultiplSelect}
219+
MenuProps={{ disableScrollLock: true, marginThreshold: null }}
213220
>
214221
<MenuItem value={10}>Ten</MenuItem>
215222
<MenuItem value={20}>Twenty</MenuItem>

‎src/sections/app.style.js‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,6 @@ body,html {
5757
overflow-x: hidden;
5858
}
5959
60-
/* When MUI opens a dropdown/modal, it injects overflow:hidden on <body> via inline style.
61-
Because body has overflow:clip, <html> is the actual scroll container. This rule
62-
synchronizes the lock — when MUI locks body, we also lock html to prevent scrolling. */
63-
html:has(body[style*="overflow: hidden"]) {
64-
overflow: hidden;
65-
}
66-
6760
body {
6861
font-size: 1.125rem;
6962
overflow: clip;
@@ -189,8 +182,8 @@ section{
189182
// styling for the searchbox
190183
.search-box {
191184
input {
192-
background-color: ${(props) => props.theme.shadowDarkColor}!important;
193-
color: ${(props) => props.theme.text};
185+
background-color: ${props => props.theme.shadowDarkColor}!important;
186+
color: ${props => props.theme.text};
194187
transition: all 450ms ease 0s;
195188
196189
&:focus {

0 commit comments

Comments
 (0)