Skip to content

Commit d77413b

Browse files
shteypandey28-hueshteypandey28-hue
committed
docs: fix FormControl Select label overlap by using standard MUI pattern
Removed shrink, displayEmpty, and disabled placeholder MenuItems. Labels now act as natural placeholders. States use defaultValue for pre-selected values so labels auto-shrink correctly. Signed-off-by: shteypandey28-hue <shteypandey28@gmail.com>
1 parent d74cd36 commit d77413b

3 files changed

Lines changed: 27 additions & 102 deletions

File tree

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

Lines changed: 10 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,14 @@ import { FormHelperText } from "@mui/material";
3030
3131
<SistentThemeProvider>
3232
<FormControl sx={{ width: "200px" }}>
33-
<InputLabel shrink id="age-select-label">Age</InputLabel>
33+
<InputLabel id="age-select-label">Age</InputLabel>
3434
<Select
3535
labelId="age-select-label"
3636
id="age-select"
3737
value={age}
3838
label="Age"
3939
onChange={(e) => setAge(e.target.value)}
40-
displayEmpty
4140
>
42-
<MenuItem value="" disabled>
43-
<em>Select Age</em>
44-
</MenuItem>
4541
<MenuItem value={10}>Ten</MenuItem>
4642
<MenuItem value={20}>Twenty</MenuItem>
4743
<MenuItem value={30}>Thirty</MenuItem>
@@ -59,18 +55,14 @@ import { FormHelperText } from "@mui/material";
5955
6056
<SistentThemeProvider>
6157
<FormControl sx={{ width: "200px" }} required>
62-
<InputLabel shrink id="category-select-label">Category</InputLabel>
58+
<InputLabel id="category-select-label">Category</InputLabel>
6359
<Select
6460
labelId="category-select-label"
6561
id="category-select"
6662
value={category}
6763
label="Category"
6864
onChange={(e) => setCategory(e.target.value)}
69-
displayEmpty
7065
>
71-
<MenuItem value="" disabled>
72-
<em>Select Category</em>
73-
</MenuItem>
7466
<MenuItem value="frontend">Frontend</MenuItem>
7567
<MenuItem value="backend">Backend</MenuItem>
7668
</Select>
@@ -87,18 +79,14 @@ import { FormHelperText } from "@mui/material";
8779
8880
<SistentThemeProvider>
8981
<FormControl sx={{ width: "200px" }} error>
90-
<InputLabel shrink id="priority-select-label">Priority</InputLabel>
82+
<InputLabel id="priority-select-label">Priority</InputLabel>
9183
<Select
9284
labelId="priority-select-label"
9385
id="priority-select"
9486
value={priority}
9587
label="Priority"
9688
onChange={(e) => setPriority(e.target.value)}
97-
displayEmpty
9889
>
99-
<MenuItem value="" disabled>
100-
<em>Select Priority</em>
101-
</MenuItem>
10290
<MenuItem value="low">Low</MenuItem>
10391
<MenuItem value="high">High</MenuItem>
10492
</Select>
@@ -115,17 +103,13 @@ import { FormHelperText } from "@mui/material";
115103
116104
<SistentThemeProvider>
117105
<FormControl sx={{ width: "200px" }} disabled>
118-
<InputLabel shrink id="region-select-label">Region</InputLabel>
106+
<InputLabel id="region-select-label">Region</InputLabel>
119107
<Select
120108
labelId="region-select-label"
121109
id="region-select"
122-
value=""
110+
defaultValue="us"
123111
label="Region"
124-
displayEmpty
125112
>
126-
<MenuItem value="" disabled>
127-
<em>Select Region</em>
128-
</MenuItem>
129113
<MenuItem value="us">US</MenuItem>
130114
<MenuItem value="eu">EU</MenuItem>
131115
</Select>
@@ -247,20 +231,14 @@ const FormControlCode = () => {
247231
<div className="items">
248232
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
249233
<FormControl sx={{ width: "200px" }}>
250-
<InputLabel shrink id="demo-age-select-label">
251-
Age
252-
</InputLabel>
234+
<InputLabel id="demo-age-select-label">Age</InputLabel>
253235
<Select
254236
labelId="demo-age-select-label"
255237
id="demo-age-select"
256238
value={age}
257239
label="Age"
258240
onChange={(e) => setAge(e.target.value)}
259-
displayEmpty
260241
>
261-
<MenuItem value="" disabled>
262-
<em>Select Age</em>
263-
</MenuItem>
264242
<MenuItem value={10}>Ten</MenuItem>
265243
<MenuItem value={20}>Twenty</MenuItem>
266244
<MenuItem value={30}>Thirty</MenuItem>
@@ -283,7 +261,7 @@ const FormControlCode = () => {
283261
<div className="items">
284262
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
285263
<FormControl sx={{ width: "200px" }} required>
286-
<InputLabel shrink id="demo-category-select-label">
264+
<InputLabel id="demo-category-select-label">
287265
Category
288266
</InputLabel>
289267
<Select
@@ -292,11 +270,7 @@ const FormControlCode = () => {
292270
value={category}
293271
label="Category"
294272
onChange={(e) => setCategory(e.target.value)}
295-
displayEmpty
296273
>
297-
<MenuItem value="" disabled>
298-
<em>Select Category</em>
299-
</MenuItem>
300274
<MenuItem value="frontend">Frontend</MenuItem>
301275
<MenuItem value="backend">Backend</MenuItem>
302276
</Select>
@@ -318,7 +292,7 @@ const FormControlCode = () => {
318292
<div className="items">
319293
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
320294
<FormControl sx={{ width: "200px" }} error>
321-
<InputLabel shrink id="demo-priority-select-label">
295+
<InputLabel id="demo-priority-select-label">
322296
Priority
323297
</InputLabel>
324298
<Select
@@ -327,11 +301,7 @@ const FormControlCode = () => {
327301
value={priority}
328302
label="Priority"
329303
onChange={(e) => setPriority(e.target.value)}
330-
displayEmpty
331304
>
332-
<MenuItem value="" disabled>
333-
<em>Select Priority</em>
334-
</MenuItem>
335305
<MenuItem value="low">Low</MenuItem>
336306
<MenuItem value="high">High</MenuItem>
337307
</Select>
@@ -353,19 +323,13 @@ const FormControlCode = () => {
353323
<div className="items">
354324
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
355325
<FormControl sx={{ width: "200px" }} disabled>
356-
<InputLabel shrink id="demo-region-select-label">
357-
Region
358-
</InputLabel>
326+
<InputLabel id="demo-region-select-label">Region</InputLabel>
359327
<Select
360328
labelId="demo-region-select-label"
361329
id="demo-region-select"
362-
value=""
330+
defaultValue="us"
363331
label="Region"
364-
displayEmpty
365332
>
366-
<MenuItem value="" disabled>
367-
<em>Select Region</em>
368-
</MenuItem>
369333
<MenuItem value="us">US</MenuItem>
370334
<MenuItem value="eu">EU</MenuItem>
371335
</Select>

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

Lines changed: 6 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -143,19 +143,13 @@ const FormControlGuidance = () => {
143143
<Row $Hcenter className="image-container">
144144
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
145145
<FormControl sx={{ width: "200px" }} required>
146-
<InputLabel shrink id="category-select-label">
147-
Category
148-
</InputLabel>
146+
<InputLabel id="category-select-label">Category</InputLabel>
149147
<Select
150148
labelId="category-select-label"
151149
id="category-select"
152-
value={""}
150+
defaultValue="frontend"
153151
label="Category"
154-
displayEmpty
155152
>
156-
<MenuItem value="" disabled>
157-
<em>Select Category</em>
158-
</MenuItem>
159153
<MenuItem value="frontend">Frontend</MenuItem>
160154
<MenuItem value="backend">Backend</MenuItem>
161155
<MenuItem value="devops">DevOps</MenuItem>
@@ -173,19 +167,13 @@ const FormControlGuidance = () => {
173167
<Row $Hcenter className="image-container">
174168
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
175169
<FormControl sx={{ width: "200px" }} error>
176-
<InputLabel shrink id="priority-select-label">
177-
Priority
178-
</InputLabel>
170+
<InputLabel id="priority-select-label">Priority</InputLabel>
179171
<Select
180172
labelId="priority-select-label"
181173
id="priority-select"
182-
value={""}
174+
defaultValue="low"
183175
label="Priority"
184-
displayEmpty
185176
>
186-
<MenuItem value="" disabled>
187-
<em>Select Priority</em>
188-
</MenuItem>
189177
<MenuItem value="low">Low</MenuItem>
190178
<MenuItem value="medium">Medium</MenuItem>
191179
<MenuItem value="high">High</MenuItem>
@@ -203,19 +191,13 @@ const FormControlGuidance = () => {
203191
<Row $Hcenter className="image-container">
204192
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
205193
<FormControl sx={{ width: "200px" }} disabled>
206-
<InputLabel shrink id="region-select-label">
207-
Region
208-
</InputLabel>
194+
<InputLabel id="region-select-label">Region</InputLabel>
209195
<Select
210196
labelId="region-select-label"
211197
id="region-select"
212-
value={""}
198+
defaultValue="us"
213199
label="Region"
214-
displayEmpty
215200
>
216-
<MenuItem value="" disabled>
217-
<em>Select Region</em>
218-
</MenuItem>
219201
<MenuItem value="us">US</MenuItem>
220202
<MenuItem value="eu">EU</MenuItem>
221203
</Select>

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

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -92,19 +92,13 @@ const SistentFormControl = () => {
9292
<Row $Hcenter className="image-container">
9393
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
9494
<FormControl sx={{ width: "200px" }}>
95-
<InputLabel shrink id="age-select-label">
96-
Age
97-
</InputLabel>
95+
<InputLabel id="age-select-label">Age</InputLabel>
9896
<Select
9997
labelId="age-select-label"
10098
id="age-select"
101-
value={""}
99+
defaultValue=""
102100
label="Age"
103-
displayEmpty
104101
>
105-
<MenuItem value="" disabled>
106-
<em>Select Age</em>
107-
</MenuItem>
108102
<MenuItem value={10}>Ten</MenuItem>
109103
<MenuItem value={20}>Twenty</MenuItem>
110104
<MenuItem value={30}>Thirty</MenuItem>
@@ -184,58 +178,43 @@ const SistentFormControl = () => {
184178
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
185179
<div style={{ display: "flex", gap: "1.5rem", flexWrap: "wrap" }}>
186180
<FormControl sx={{ width: "180px" }} required>
187-
<InputLabel shrink id="required-select-label">
188-
Required
189-
</InputLabel>
181+
<InputLabel id="required-select-label">Required</InputLabel>
190182
<Select
191183
labelId="required-select-label"
192184
id="required-select"
193-
value={""}
185+
defaultValue="a"
194186
label="Required"
195-
displayEmpty
196187
>
197-
<MenuItem value="" disabled>
198-
<em>Select Option</em>
199-
</MenuItem>
200188
<MenuItem value="a">Option A</MenuItem>
189+
<MenuItem value="b">Option B</MenuItem>
201190
</Select>
202191
<FormHelperText>This field is required</FormHelperText>
203192
</FormControl>
204193

205194
<FormControl sx={{ width: "180px" }} error>
206-
<InputLabel shrink id="error-select-label">
207-
Error
208-
</InputLabel>
195+
<InputLabel id="error-select-label">Error</InputLabel>
209196
<Select
210197
labelId="error-select-label"
211198
id="error-select"
212-
value={""}
199+
defaultValue="a"
213200
label="Error"
214-
displayEmpty
215201
>
216-
<MenuItem value="" disabled>
217-
<em>Select Option</em>
218-
</MenuItem>
219202
<MenuItem value="a">Option A</MenuItem>
203+
<MenuItem value="b">Option B</MenuItem>
220204
</Select>
221205
<FormHelperText>Invalid selection</FormHelperText>
222206
</FormControl>
223207

224208
<FormControl sx={{ width: "180px" }} disabled>
225-
<InputLabel shrink id="disabled-select-label">
226-
Disabled
227-
</InputLabel>
209+
<InputLabel id="disabled-select-label">Disabled</InputLabel>
228210
<Select
229211
labelId="disabled-select-label"
230212
id="disabled-select"
231-
value={""}
213+
defaultValue="a"
232214
label="Disabled"
233-
displayEmpty
234215
>
235-
<MenuItem value="" disabled>
236-
<em>Select Option</em>
237-
</MenuItem>
238216
<MenuItem value="a">Option A</MenuItem>
217+
<MenuItem value="b">Option B</MenuItem>
239218
</Select>
240219
<FormHelperText>This field is disabled</FormHelperText>
241220
</FormControl>

0 commit comments

Comments
 (0)