Skip to content

Commit f8f87b8

Browse files
boaz0boaz0
authored
fix(select): fix group select options in single variant (#3838)
Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
1 parent b010f0d commit f8f87b8

File tree

3 files changed

+121
-38
lines changed

3 files changed

+121
-38
lines changed

‎packages/react-core/src/components/Select/Select.tsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -304,8 +304,15 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
304304
return;
305305
}
306306

307-
const { children } = this.props;
308-
const item = children.filter(child => child.props.value.toString() === value.toString())[0];
307+
const { children, isGrouped } = this.props;
308+
let item = children.filter(
309+
child => child.props.value !== undefined && child.props.value.toString() === value.toString()
310+
)[0];
311+
if (isGrouped) {
312+
item = children
313+
.reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
314+
.filter(child => child.props.value.toString() === value.toString())[0];
315+
}
309316
if (item) {
310317
if (item && item.props.children) {
311318
if (type === 'node') {
@@ -576,6 +583,7 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
576583
{variant === SelectVariant.single && isExpanded && !customContent && (
577584
<SelectMenu
578585
{...props}
586+
isGrouped={isGrouped}
579587
selected={selections}
580588
openedOnEnter={openedOnEnter}
581589
aria-label={ariaLabel}

‎packages/react-core/src/components/Select/__tests__/__snapshots__/Select.test.tsx.snap‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4685,13 +4685,11 @@ exports[`select renders select groups successfully 1`] = `
46854685
>
46864686
<div
46874687
class="pf-c-select__menu-group"
4688-
id="-0"
4689-
index="0"
46904688
>
46914689
<div
46924690
aria-hidden="true"
46934691
class="pf-c-select__menu-group-title"
4694-
id=""
4692+
id="group-1"
46954693
>
46964694
group 1
46974695
</div>
@@ -4700,6 +4698,7 @@ exports[`select renders select groups successfully 1`] = `
47004698
>
47014699
<button
47024700
class="pf-c-select__menu-item"
4701+
id="Mr-0"
47034702
role="option"
47044703
type="button"
47054704
>
@@ -4711,6 +4710,7 @@ exports[`select renders select groups successfully 1`] = `
47114710
>
47124711
<button
47134712
class="pf-c-select__menu-item"
4713+
id="Mrs-1"
47144714
role="option"
47154715
type="button"
47164716
>
@@ -4722,6 +4722,7 @@ exports[`select renders select groups successfully 1`] = `
47224722
>
47234723
<button
47244724
class="pf-c-select__menu-item"
4725+
id="Ms-2"
47254726
role="option"
47264727
type="button"
47274728
>
@@ -4733,6 +4734,7 @@ exports[`select renders select groups successfully 1`] = `
47334734
>
47344735
<button
47354736
class="pf-c-select__menu-item"
4737+
id="Other-3"
47364738
role="option"
47374739
type="button"
47384740
>
@@ -4742,13 +4744,11 @@ exports[`select renders select groups successfully 1`] = `
47424744
</div>
47434745
<div
47444746
class="pf-c-select__menu-group"
4745-
id="-1"
4746-
index="1"
47474747
>
47484748
<div
47494749
aria-hidden="true"
47504750
class="pf-c-select__menu-group-title"
4751-
id=""
4751+
id="group-2"
47524752
>
47534753
group 2
47544754
</div>
@@ -4757,6 +4757,7 @@ exports[`select renders select groups successfully 1`] = `
47574757
>
47584758
<button
47594759
class="pf-c-select__menu-item"
4760+
id="Mr-4"
47604761
role="option"
47614762
type="button"
47624763
>
@@ -4768,6 +4769,7 @@ exports[`select renders select groups successfully 1`] = `
47684769
>
47694770
<button
47704771
class="pf-c-select__menu-item"
4772+
id="Mrs-5"
47714773
role="option"
47724774
type="button"
47734775
>
@@ -4779,6 +4781,7 @@ exports[`select renders select groups successfully 1`] = `
47794781
>
47804782
<button
47814783
class="pf-c-select__menu-item"
4784+
id="Ms-6"
47824785
role="option"
47834786
type="button"
47844787
>
@@ -4790,6 +4793,7 @@ exports[`select renders select groups successfully 1`] = `
47904793
>
47914794
<button
47924795
class="pf-c-select__menu-item"
4796+
id="Other-7"
47934797
role="option"
47944798
type="button"
47954799
>
@@ -4859,7 +4863,7 @@ exports[`select renders select groups successfully 1`] = `
48594863
hasInlineFilter={false}
48604864
isCustomContent={false}
48614865
isExpanded={false}
4862-
isGrouped={false}
4866+
isGrouped={true}
48634867
keyHandler={[Function]}
48644868
maxHeight=""
48654869
openedOnEnter={false}
@@ -4871,32 +4875,24 @@ exports[`select renders select groups successfully 1`] = `
48714875
role="listbox"
48724876
>
48734877
<SelectGroup
4874-
id="-0"
4875-
index={0}
4876-
isSelected={false}
48774878
key=".0"
4878-
keyHandler={[Function]}
48794879
label="group 1"
4880-
sendRef={[Function]}
4880+
titleId="group-1"
48814881
>
48824882
<div
48834883
className="pf-c-select__menu-group"
4884-
id="-0"
4885-
index={0}
4886-
isSelected={false}
4887-
keyHandler={[Function]}
4888-
sendRef={[Function]}
48894884
>
48904885
<div
48914886
aria-hidden={true}
48924887
className="pf-c-select__menu-group-title"
4893-
id=""
4888+
id="group-1"
48944889
>
48954890
group 1
48964891
</div>
48974892
<SelectOption
48984893
className=""
48994894
component="button"
4895+
id="Mr-0"
49004896
index={0}
49014897
isChecked={false}
49024898
isDisabled={false}
@@ -4916,6 +4912,7 @@ exports[`select renders select groups successfully 1`] = `
49164912
<button
49174913
aria-selected={null}
49184914
className="pf-c-select__menu-item"
4915+
id="Mr-0"
49194916
onClick={[Function]}
49204917
onKeyDown={[Function]}
49214918
role="option"
@@ -4928,7 +4925,8 @@ exports[`select renders select groups successfully 1`] = `
49284925
<SelectOption
49294926
className=""
49304927
component="button"
4931-
index={0}
4928+
id="Mrs-1"
4929+
index={1}
49324930
isChecked={false}
49334931
isDisabled={false}
49344932
isFocused={false}
@@ -4947,6 +4945,7 @@ exports[`select renders select groups successfully 1`] = `
49474945
<button
49484946
aria-selected={null}
49494947
className="pf-c-select__menu-item"
4948+
id="Mrs-1"
49504949
onClick={[Function]}
49514950
onKeyDown={[Function]}
49524951
role="option"
@@ -4959,7 +4958,8 @@ exports[`select renders select groups successfully 1`] = `
49594958
<SelectOption
49604959
className=""
49614960
component="button"
4962-
index={0}
4961+
id="Ms-2"
4962+
index={2}
49634963
isChecked={false}
49644964
isDisabled={false}
49654965
isFocused={false}
@@ -4978,6 +4978,7 @@ exports[`select renders select groups successfully 1`] = `
49784978
<button
49794979
aria-selected={null}
49804980
className="pf-c-select__menu-item"
4981+
id="Ms-2"
49814982
onClick={[Function]}
49824983
onKeyDown={[Function]}
49834984
role="option"
@@ -4990,7 +4991,8 @@ exports[`select renders select groups successfully 1`] = `
49904991
<SelectOption
49914992
className=""
49924993
component="button"
4993-
index={0}
4994+
id="Other-3"
4995+
index={3}
49944996
isChecked={false}
49954997
isDisabled={false}
49964998
isFocused={false}
@@ -5009,6 +5011,7 @@ exports[`select renders select groups successfully 1`] = `
50095011
<button
50105012
aria-selected={null}
50115013
className="pf-c-select__menu-item"
5014+
id="Other-3"
50125015
onClick={[Function]}
50135016
onKeyDown={[Function]}
50145017
role="option"
@@ -5021,33 +5024,25 @@ exports[`select renders select groups successfully 1`] = `
50215024
</div>
50225025
</SelectGroup>
50235026
<SelectGroup
5024-
id="-1"
5025-
index={1}
5026-
isSelected={false}
50275027
key=".1"
5028-
keyHandler={[Function]}
50295028
label="group 2"
5030-
sendRef={[Function]}
5029+
titleId="group-2"
50315030
>
50325031
<div
50335032
className="pf-c-select__menu-group"
5034-
id="-1"
5035-
index={1}
5036-
isSelected={false}
5037-
keyHandler={[Function]}
5038-
sendRef={[Function]}
50395033
>
50405034
<div
50415035
aria-hidden={true}
50425036
className="pf-c-select__menu-group-title"
5043-
id=""
5037+
id="group-2"
50445038
>
50455039
group 2
50465040
</div>
50475041
<SelectOption
50485042
className=""
50495043
component="button"
5050-
index={0}
5044+
id="Mr-4"
5045+
index={4}
50515046
isChecked={false}
50525047
isDisabled={false}
50535048
isFocused={false}
@@ -5066,6 +5061,7 @@ exports[`select renders select groups successfully 1`] = `
50665061
<button
50675062
aria-selected={null}
50685063
className="pf-c-select__menu-item"
5064+
id="Mr-4"
50695065
onClick={[Function]}
50705066
onKeyDown={[Function]}
50715067
role="option"
@@ -5078,7 +5074,8 @@ exports[`select renders select groups successfully 1`] = `
50785074
<SelectOption
50795075
className=""
50805076
component="button"
5081-
index={0}
5077+
id="Mrs-5"
5078+
index={5}
50825079
isChecked={false}
50835080
isDisabled={false}
50845081
isFocused={false}
@@ -5097,6 +5094,7 @@ exports[`select renders select groups successfully 1`] = `
50975094
<button
50985095
aria-selected={null}
50995096
className="pf-c-select__menu-item"
5097+
id="Mrs-5"
51005098
onClick={[Function]}
51015099
onKeyDown={[Function]}
51025100
role="option"
@@ -5109,7 +5107,8 @@ exports[`select renders select groups successfully 1`] = `
51095107
<SelectOption
51105108
className=""
51115109
component="button"
5112-
index={0}
5110+
id="Ms-6"
5111+
index={6}
51135112
isChecked={false}
51145113
isDisabled={false}
51155114
isFocused={false}
@@ -5128,6 +5127,7 @@ exports[`select renders select groups successfully 1`] = `
51285127
<button
51295128
aria-selected={null}
51305129
className="pf-c-select__menu-item"
5130+
id="Ms-6"
51315131
onClick={[Function]}
51325132
onKeyDown={[Function]}
51335133
role="option"
@@ -5140,7 +5140,8 @@ exports[`select renders select groups successfully 1`] = `
51405140
<SelectOption
51415141
className=""
51425142
component="button"
5143-
index={0}
5143+
id="Other-7"
5144+
index={7}
51445145
isChecked={false}
51455146
isDisabled={false}
51465147
isFocused={false}
@@ -5159,6 +5160,7 @@ exports[`select renders select groups successfully 1`] = `
51595160
<button
51605161
aria-selected={null}
51615162
className="pf-c-select__menu-item"
5163+
id="Other-7"
51625164
onClick={[Function]}
51635165
onKeyDown={[Function]}
51645166
role="option"

0 commit comments

Comments
 (0)