Skip to content

Commit 3937884

Browse files
author
Jeffrey
committed
Firefox doesn’t display label value’s for Select Option. https://screencast.com/t/7wgClTiqmQ. Update Option to use label when props.children not provided.
1 parent 048b868 commit 3937884

File tree

3 files changed

+147
-51
lines changed

3 files changed

+147
-51
lines changed

‎.storybook/__storyshots__/Datepicker.shot‎

Lines changed: 99 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -73,37 +73,59 @@ exports[`Controlled with knobs`] = `
7373
value={2017}>
7474
<option
7575
label={2012}
76-
value={2012} />
76+
value={2012}>
77+
2012
78+
</option>
7779
<option
7880
label={2013}
79-
value={2013} />
81+
value={2013}>
82+
2013
83+
</option>
8084
<option
8185
label={2014}
82-
value={2014} />
86+
value={2014}>
87+
2014
88+
</option>
8389
<option
8490
label={2015}
85-
value={2015} />
91+
value={2015}>
92+
2015
93+
</option>
8694
<option
8795
label={2016}
88-
value={2016} />
96+
value={2016}>
97+
2016
98+
</option>
8999
<option
90100
label={2017}
91-
value={2017} />
101+
value={2017}>
102+
2017
103+
</option>
92104
<option
93105
label={2018}
94-
value={2018} />
106+
value={2018}>
107+
2018
108+
</option>
95109
<option
96110
label={2019}
97-
value={2019} />
111+
value={2019}>
112+
2019
113+
</option>
98114
<option
99115
label={2020}
100-
value={2020} />
116+
value={2020}>
117+
2020
118+
</option>
101119
<option
102120
label={2021}
103-
value={2021} />
121+
value={2021}>
122+
2021
123+
</option>
104124
<option
105125
label={2022}
106-
value={2022} />
126+
value={2022}>
127+
2022
128+
</option>
107129
</select>
108130
</div>
109131
</div>
@@ -1332,37 +1354,59 @@ exports[`Default`] = `
13321354
value={2016}>
13331355
<option
13341356
label={2011}
1335-
value={2011} />
1357+
value={2011}>
1358+
2011
1359+
</option>
13361360
<option
13371361
label={2012}
1338-
value={2012} />
1362+
value={2012}>
1363+
2012
1364+
</option>
13391365
<option
13401366
label={2013}
1341-
value={2013} />
1367+
value={2013}>
1368+
2013
1369+
</option>
13421370
<option
13431371
label={2014}
1344-
value={2014} />
1372+
value={2014}>
1373+
2014
1374+
</option>
13451375
<option
13461376
label={2015}
1347-
value={2015} />
1377+
value={2015}>
1378+
2015
1379+
</option>
13481380
<option
13491381
label={2016}
1350-
value={2016} />
1382+
value={2016}>
1383+
2016
1384+
</option>
13511385
<option
13521386
label={2017}
1353-
value={2017} />
1387+
value={2017}>
1388+
2017
1389+
</option>
13541390
<option
13551391
label={2018}
1356-
value={2018} />
1392+
value={2018}>
1393+
2018
1394+
</option>
13571395
<option
13581396
label={2019}
1359-
value={2019} />
1397+
value={2019}>
1398+
2019
1399+
</option>
13601400
<option
13611401
label={2020}
1362-
value={2020} />
1402+
value={2020}>
1403+
2020
1404+
</option>
13631405
<option
13641406
label={2021}
1365-
value={2021} />
1407+
value={2021}>
1408+
2021
1409+
</option>
13661410
</select>
13671411
</div>
13681412
</div>
@@ -2534,37 +2578,59 @@ exports[`Extension Rendering`] = `
25342578
value={2016}>
25352579
<option
25362580
label={2011}
2537-
value={2011} />
2581+
value={2011}>
2582+
2011
2583+
</option>
25382584
<option
25392585
label={2012}
2540-
value={2012} />
2586+
value={2012}>
2587+
2012
2588+
</option>
25412589
<option
25422590
label={2013}
2543-
value={2013} />
2591+
value={2013}>
2592+
2013
2593+
</option>
25442594
<option
25452595
label={2014}
2546-
value={2014} />
2596+
value={2014}>
2597+
2014
2598+
</option>
25472599
<option
25482600
label={2015}
2549-
value={2015} />
2601+
value={2015}>
2602+
2015
2603+
</option>
25502604
<option
25512605
label={2016}
2552-
value={2016} />
2606+
value={2016}>
2607+
2016
2608+
</option>
25532609
<option
25542610
label={2017}
2555-
value={2017} />
2611+
value={2017}>
2612+
2017
2613+
</option>
25562614
<option
25572615
label={2018}
2558-
value={2018} />
2616+
value={2018}>
2617+
2018
2618+
</option>
25592619
<option
25602620
label={2019}
2561-
value={2019} />
2621+
value={2019}>
2622+
2019
2623+
</option>
25622624
<option
25632625
label={2020}
2564-
value={2020} />
2626+
value={2020}>
2627+
2020
2628+
</option>
25652629
<option
25662630
label={2021}
2567-
value={2021} />
2631+
value={2021}>
2632+
2021
2633+
</option>
25682634
</select>
25692635
</div>
25702636
</div>

‎.storybook/__storyshots__/Select.shot‎

Lines changed: 45 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,19 @@ exports[`Controlled with knobs`] = `
2525
value={undefined}>
2626
<option
2727
label="Option One"
28-
value="1" />
28+
value="1">
29+
Option One
30+
</option>
2931
<option
3032
label="Option Two"
31-
value="2" />
33+
value="2">
34+
Option Two
35+
</option>
3236
<option
3337
label="Option Three"
34-
value="3" />
38+
value="3">
39+
Option Three
40+
</option>
3541
</select>
3642
</div>
3743
</div>
@@ -862,13 +868,19 @@ exports[`Default`] = `
862868
onChange={[Function]}>
863869
<option
864870
label="Option One"
865-
value="1" />
871+
value="1">
872+
Option One
873+
</option>
866874
<option
867875
label="Option Two"
868-
value="2" />
876+
value="2">
877+
Option Two
878+
</option>
869879
<option
870880
label="Option Three"
871-
value="3" />
881+
value="3">
882+
Option Three
883+
</option>
872884
</select>
873885
</div>
874886
</div>
@@ -1579,13 +1591,19 @@ exports[`Disabled`] = `
15791591
onChange={[Function]}>
15801592
<option
15811593
label="Option One"
1582-
value="1" />
1594+
value="1">
1595+
Option One
1596+
</option>
15831597
<option
15841598
label="Option Two"
1585-
value="2" />
1599+
value="2">
1600+
Option Two
1601+
</option>
15861602
<option
15871603
label="Option Three"
1588-
value="3" />
1604+
value="3">
1605+
Option Three
1606+
</option>
15891607
</select>
15901608
</div>
15911609
</div>
@@ -2318,13 +2336,19 @@ exports[`Error`] = `
23182336
onChange={[Function]}>
23192337
<option
23202338
label="Option One"
2321-
value="1" />
2339+
value="1">
2340+
Option One
2341+
</option>
23222342
<option
23232343
label="Option Two"
2324-
value="2" />
2344+
value="2">
2345+
Option Two
2346+
</option>
23252347
<option
23262348
label="Option Three"
2327-
value="3" />
2349+
value="3">
2350+
Option Three
2351+
</option>
23282352
</select>
23292353
<span
23302354
className="slds-form-element__help">
@@ -3088,13 +3112,19 @@ exports[`Required`] = `
30883112
onChange={[Function]}>
30893113
<option
30903114
label="Option One"
3091-
value="1" />
3115+
value="1">
3116+
Option One
3117+
</option>
30923118
<option
30933119
label="Option Two"
3094-
value="2" />
3120+
value="2">
3121+
Option Two
3122+
</option>
30953123
<option
30963124
label="Option Three"
3097-
value="3" />
3125+
value="3">
3126+
Option Three
3127+
</option>
30983128
</select>
30993129
</div>
31003130
</div>

‎src/scripts/Select.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,6 @@ Select.propTypes = {
5858

5959
Select.isFormElement = true;
6060

61-
export const Option = props => (
62-
<option { ...props } />
63-
);
61+
export const Option = (props) => {
62+
return props.children ? <option {...props} /> : <option {...props}>{props.label}</option>;
63+
};

0 commit comments

Comments
 (0)