Skip to content

Commit 1c7bb15

Browse files
rishiraj38rishiraj38
committed
fix(sistent): resolve select components detachment on scroll
Signed-off-by: Rishi Raj <rishiraj438gt@gmail.com>
1 parent 0a52db8 commit 1c7bb15

File tree

3 files changed

+22
-22
lines changed

3 files changed

+22
-22
lines changed

‎src/collections/sistent/components/select/code.mdx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { FormControl, Select, MenuItem, InputLabel, OutlinedInput, ListSubheader
1111
export const BasicSelectCodeDemo = ({ variant, ...props }) => {
1212
return (
1313
<FormControl sx={{ width: "200px" }} variant={variant} {...props}>
14-
<Select defaultValue={10} {...props}>
14+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10} {...props}>
1515
<MenuItem value={10}>Ten</MenuItem>
1616
<MenuItem value={20}>Twenty</MenuItem>
1717
<MenuItem value={30}>Thirty</MenuItem>
@@ -23,7 +23,7 @@ export const BasicSelectCodeDemo = ({ variant, ...props }) => {
2323
export const AutoWidthSelectCodeDemo = () => {
2424
return (
2525
<FormControl sx={{ minWidth: "120px" }}>
26-
<Select defaultValue={10} autoWidth>
26+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10} autoWidth>
2727
<MenuItem value={10}>Ten</MenuItem>
2828
<MenuItem value={20}>Twenty</MenuItem>
2929
<MenuItem value={30}>Thirty</MenuItem>
@@ -35,7 +35,7 @@ export const AutoWidthSelectCodeDemo = () => {
3535
export const FullWidthSelectCodeDemo = () => {
3636
return (
3737
<FormControl fullWidth>
38-
<Select defaultValue={10} fullWidth>
38+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10} fullWidth>
3939
<MenuItem value={10}>Ten</MenuItem>
4040
<MenuItem value={20}>Twenty</MenuItem>
4141
<MenuItem value={30}>Thirty</MenuItem>
@@ -48,7 +48,7 @@ export const LabelSelectCodeDemo = () => {
4848
return (
4949
<FormControl sx={{ width: "200px" }}>
5050
<InputLabel id="demo-select-label">Age</InputLabel>
51-
<Select
51+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
5252
labelId="demo-select-label"
5353
id="demo-select"
5454
label="Age"
@@ -64,7 +64,7 @@ export const LabelSelectCodeDemo = () => {
6464
export const HelperSelectCodeDemo = () => {
6565
return (
6666
<FormControl sx={{ width: "200px" }}>
67-
<Select defaultValue={10}>
67+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10}>
6868
<MenuItem value={10}>Ten</MenuItem>
6969
<MenuItem value={20}>Twenty</MenuItem>
7070
<MenuItem value={30}>Thirty</MenuItem>
@@ -78,7 +78,7 @@ export const PlaceholderSelectCodeDemo = () => {
7878
const [selectedAge, setSelectedAge] = useState("");
7979
return (
8080
<FormControl sx={{ width: "200px" }}>
81-
<Select
81+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
8282
id="demo-select-placeholder"
8383
onChange={(e) => setSelectedAge(e.target.value)}
8484
renderValue={() => {
@@ -99,7 +99,7 @@ export const PlaceholderSelectCodeDemo = () => {
9999
export const GroupingSelectCodeDemo = () => {
100100
return (
101101
<FormControl sx={{ width: "200px" }}>
102-
<Select defaultValue={10}>
102+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10}>
103103
<ListSubheader muiSkipListHighlight>Group 1</ListSubheader>
104104
<MenuItem value={10}>Ten</MenuItem>
105105
<MenuItem value={20}>Twenty</MenuItem>
@@ -118,14 +118,14 @@ export const BehaviorSelectCodeDemo = () => {
118118
return (
119119
<Grid container spacing={2} sx={{ justifyContent: "center" }}>
120120
<FormControl sx={{ width: "200px" }} disabled>
121-
<Select defaultValue={10}>
121+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10}>
122122
<MenuItem value={10}>Ten</MenuItem>
123123
<MenuItem value={20}>Twenty</MenuItem>
124124
<MenuItem value={30}>Thirty</MenuItem>
125125
</Select>
126126
</FormControl>
127127
<FormControl sx={{ width: "200px" }} error>
128-
<Select defaultValue={10}>
128+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} defaultValue={10}>
129129
<MenuItem value={10}>Ten</MenuItem>
130130
<MenuItem value={20}>Twenty</MenuItem>
131131
<MenuItem value={30}>Thirty</MenuItem>
@@ -139,7 +139,7 @@ export const RequiredSelectCodeDemo = () => {
139139
return (
140140
<FormControl sx={{ width: "200px" }} required>
141141
<InputLabel id="demo-select-label-required">Age</InputLabel>
142-
<Select
142+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
143143
labelId="demo-select-label-required"
144144
id="demo-select-required"
145145
label="Age"
@@ -159,7 +159,7 @@ export const MultipleSelectCodeDemo = () => {
159159
};
160160
return (
161161
<FormControl sx={{ width: "200px" }}>
162-
<Select
162+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
163163
multiple
164164
input={<OutlinedInput label="Name" />}
165165
value={multipleAges}

‎src/collections/sistent/components/select/guidance.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export const StateSelectDemo = (props) => {
1414
return (
1515
<FormControl sx={{ width: "200px" }} {...props}>
1616
<InputLabel id="demo-simple-select-state-label">Age</InputLabel>
17-
<Select
17+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
1818
labelId="demo-simple-select-state-label"
1919
id="demo-simple-select-state"
2020
value={age}
@@ -43,7 +43,7 @@ export const HelperSelectDemo = () => {
4343
>
4444
<FormControl sx={{ width: "200px" }}>
4545
<InputLabel id="demo-select-label">Age</InputLabel>
46-
<Select
46+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
4747
labelId="demo-select-label"
4848
id="demo-select"
4949
label="Age"
@@ -55,7 +55,7 @@ export const HelperSelectDemo = () => {
5555
<FormHelperText>With label + Helper text</FormHelperText>
5656
</FormControl>
5757
<FormControl sx={{ width: "200px" }}>
58-
<Select id="demo-select-without-label">
58+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }} id="demo-select-without-label">
5959
<MenuItem value={10}>Ten</MenuItem>
6060
<MenuItem value={20}>Twenty</MenuItem>
6161
<MenuItem value={30}>Thirty</MenuItem>
@@ -71,7 +71,7 @@ export const PlaceholderSelectDemo = () => {
7171
const handleChange = (event) => setAge(event.target.value);
7272
return (
7373
<FormControl sx={{ width: "200px" }}>
74-
<Select
74+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
7575
id="demo-select-placeholder"
7676
value={age}
7777
onChange={handleChange}
@@ -95,7 +95,7 @@ export const GroupingSelectDemo = () => {
9595
return (
9696
<FormControl sx={{ width: "200px" }}>
9797
<InputLabel id="demo-select-label-grouped">Age</InputLabel>
98-
<Select
98+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
9999
labelId="demo-select-label-grouped"
100100
id="demo-select-grouped"
101101
label="Age"
@@ -123,7 +123,7 @@ export const MultipleSelectDemo = () => {
123123
return (
124124
<FormControl sx={{ width: "200px" }}>
125125
<InputLabel id="demo-multiple-name-label">Age</InputLabel>
126-
<Select
126+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
127127
multiple
128128
labelId="demo-multiple-name-label"
129129
id="demo-multiple-name"

‎src/collections/sistent/components/select/index.mdx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const BasicSelectDemo = ({ variant, ...props }) => {
1616
return (
1717
<FormControl sx={{ width: "200px" }} variant={variant} {...props}>
1818
<InputLabel id={labelId}>Age</InputLabel>
19-
<Select
19+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
2020
labelId={labelId}
2121
id={`demo-select-${variant || 'outlined'}`}
2222
value={age}
@@ -37,7 +37,7 @@ export const AutoWidthSelectDemo = () => {
3737
return (
3838
<FormControl sx={{ minWidth: "120px", m: 1 }}>
3939
<InputLabel id="demo-simple-select-autowidth-label">Age</InputLabel>
40-
<Select
40+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
4141
labelId="demo-simple-select-autowidth-label"
4242
id="demo-simple-select-autowidth"
4343
value={age}
@@ -59,7 +59,7 @@ export const SmallSelectDemo = () => {
5959
return (
6060
<FormControl sx={{ minWidth: "80px", m: 1 }} size="small">
6161
<InputLabel id="demo-simple-select-small-label">Age</InputLabel>
62-
<Select
62+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
6363
labelId="demo-simple-select-small-label"
6464
id="demo-simple-select-small"
6565
value={age}
@@ -80,7 +80,7 @@ export const FullWidthSelectDemo = () => {
8080
return (
8181
<FormControl fullWidth sx={{ m: 1 }}>
8282
<InputLabel id="demo-simple-select-fullwidth-label">Age</InputLabel>
83-
<Select
83+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
8484
labelId="demo-simple-select-fullwidth-label"
8585
id="demo-simple-select-fullwidth"
8686
value={age}
@@ -104,7 +104,7 @@ export const MultipleSelectDemo = () => {
104104
return (
105105
<FormControl sx={{ width: "200px" }}>
106106
<InputLabel id="demo-multiple-name-label">Age</InputLabel>
107-
<Select
107+
<Select MenuProps={{ disableScrollLock: true, marginThreshold: null }}
108108
labelId="demo-multiple-name-label"
109109
id="demo-multiple-name"
110110
multiple

0 commit comments

Comments
 (0)