Skip to content

Commit 96134b2

Browse files
boaz0boaz0
committed
fix(select): fix group select options in single variant
Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
1 parent c2e8e7c commit 96134b2

File tree

3 files changed

+119
-38
lines changed

3 files changed

+119
-38
lines changed

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

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -292,8 +292,13 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
292292
return;
293293
}
294294

295-
const { children } = this.props;
296-
const item = children.filter(child => child.props.value.toString() === value.toString())[0];
295+
const { children, isGrouped } = this.props;
296+
let item = children.filter(child => child.props.value !== undefined && child.props.value.toString() === value.toString())[0];
297+
if (isGrouped) {
298+
item = children
299+
.reduce((acc, curr) => [...acc, ...React.Children.toArray(curr.props.children)], [])
300+
.filter(child => child.props.value.toString() === value.toString())[0];
301+
}
297302
if (item) {
298303
if (item && item.props.children) {
299304
if (type === 'node') {
@@ -536,6 +541,7 @@ class Select extends React.Component<SelectProps & InjectedOuiaProps, SelectStat
536541
{variant === SelectVariant.single && isExpanded && !customContent && (
537542
<SelectMenu
538543
{...props}
544+
isGrouped={isGrouped}
539545
selected={selections}
540546
openedOnEnter={openedOnEnter}
541547
aria-label={ariaLabel}

‎packages/patternfly-4/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
@@ -4080,13 +4080,11 @@ exports[`select renders select groups successfully 1`] = `
40804080
>
40814081
<div
40824082
class="pf-c-select__menu-group"
4083-
id="-0"
4084-
index="0"
40854083
>
40864084
<div
40874085
aria-hidden="true"
40884086
class="pf-c-select__menu-group-title"
4089-
id=""
4087+
id="group-1"
40904088
>
40914089
group 1
40924090
</div>
@@ -4095,6 +4093,7 @@ exports[`select renders select groups successfully 1`] = `
40954093
>
40964094
<button
40974095
class="pf-c-select__menu-item"
4096+
id="Mr-0"
40984097
role="option"
40994098
type="button"
41004099
>
@@ -4106,6 +4105,7 @@ exports[`select renders select groups successfully 1`] = `
41064105
>
41074106
<button
41084107
class="pf-c-select__menu-item"
4108+
id="Mrs-1"
41094109
role="option"
41104110
type="button"
41114111
>
@@ -4117,6 +4117,7 @@ exports[`select renders select groups successfully 1`] = `
41174117
>
41184118
<button
41194119
class="pf-c-select__menu-item"
4120+
id="Ms-2"
41204121
role="option"
41214122
type="button"
41224123
>
@@ -4128,6 +4129,7 @@ exports[`select renders select groups successfully 1`] = `
41284129
>
41294130
<button
41304131
class="pf-c-select__menu-item"
4132+
id="Other-3"
41314133
role="option"
41324134
type="button"
41334135
>
@@ -4137,13 +4139,11 @@ exports[`select renders select groups successfully 1`] = `
41374139
</div>
41384140
<div
41394141
class="pf-c-select__menu-group"
4140-
id="-1"
4141-
index="1"
41424142
>
41434143
<div
41444144
aria-hidden="true"
41454145
class="pf-c-select__menu-group-title"
4146-
id=""
4146+
id="group-2"
41474147
>
41484148
group 2
41494149
</div>
@@ -4152,6 +4152,7 @@ exports[`select renders select groups successfully 1`] = `
41524152
>
41534153
<button
41544154
class="pf-c-select__menu-item"
4155+
id="Mr-4"
41554156
role="option"
41564157
type="button"
41574158
>
@@ -4163,6 +4164,7 @@ exports[`select renders select groups successfully 1`] = `
41634164
>
41644165
<button
41654166
class="pf-c-select__menu-item"
4167+
id="Mrs-5"
41664168
role="option"
41674169
type="button"
41684170
>
@@ -4174,6 +4176,7 @@ exports[`select renders select groups successfully 1`] = `
41744176
>
41754177
<button
41764178
class="pf-c-select__menu-item"
4179+
id="Ms-6"
41774180
role="option"
41784181
type="button"
41794182
>
@@ -4185,6 +4188,7 @@ exports[`select renders select groups successfully 1`] = `
41854188
>
41864189
<button
41874190
class="pf-c-select__menu-item"
4191+
id="Other-7"
41884192
role="option"
41894193
type="button"
41904194
>
@@ -4253,7 +4257,7 @@ exports[`select renders select groups successfully 1`] = `
42534257
className=""
42544258
isCustomContent={false}
42554259
isExpanded={false}
4256-
isGrouped={false}
4260+
isGrouped={true}
42574261
keyHandler={[Function]}
42584262
maxHeight=""
42594263
openedOnEnter={false}
@@ -4265,32 +4269,24 @@ exports[`select renders select groups successfully 1`] = `
42654269
role="listbox"
42664270
>
42674271
<SelectGroup
4268-
id="-0"
4269-
index={0}
4270-
isSelected={false}
42714272
key=".0"
4272-
keyHandler={[Function]}
42734273
label="group 1"
4274-
sendRef={[Function]}
4274+
titleId="group-1"
42754275
>
42764276
<div
42774277
className="pf-c-select__menu-group"
4278-
id="-0"
4279-
index={0}
4280-
isSelected={false}
4281-
keyHandler={[Function]}
4282-
sendRef={[Function]}
42834278
>
42844279
<div
42854280
aria-hidden={true}
42864281
className="pf-c-select__menu-group-title"
4287-
id=""
4282+
id="group-1"
42884283
>
42894284
group 1
42904285
</div>
42914286
<SelectOption
42924287
className=""
42934288
component="button"
4289+
id="Mr-0"
42944290
index={0}
42954291
isChecked={false}
42964292
isDisabled={false}
@@ -4309,6 +4305,7 @@ exports[`select renders select groups successfully 1`] = `
43094305
<button
43104306
aria-selected={null}
43114307
className="pf-c-select__menu-item"
4308+
id="Mr-0"
43124309
onClick={[Function]}
43134310
onKeyDown={[Function]}
43144311
role="option"
@@ -4321,7 +4318,8 @@ exports[`select renders select groups successfully 1`] = `
43214318
<SelectOption
43224319
className=""
43234320
component="button"
4324-
index={0}
4321+
id="Mrs-1"
4322+
index={1}
43254323
isChecked={false}
43264324
isDisabled={false}
43274325
isFocused={false}
@@ -4339,6 +4337,7 @@ exports[`select renders select groups successfully 1`] = `
43394337
<button
43404338
aria-selected={null}
43414339
className="pf-c-select__menu-item"
4340+
id="Mrs-1"
43424341
onClick={[Function]}
43434342
onKeyDown={[Function]}
43444343
role="option"
@@ -4351,7 +4350,8 @@ exports[`select renders select groups successfully 1`] = `
43514350
<SelectOption
43524351
className=""
43534352
component="button"
4354-
index={0}
4353+
id="Ms-2"
4354+
index={2}
43554355
isChecked={false}
43564356
isDisabled={false}
43574357
isFocused={false}
@@ -4369,6 +4369,7 @@ exports[`select renders select groups successfully 1`] = `
43694369
<button
43704370
aria-selected={null}
43714371
className="pf-c-select__menu-item"
4372+
id="Ms-2"
43724373
onClick={[Function]}
43734374
onKeyDown={[Function]}
43744375
role="option"
@@ -4381,7 +4382,8 @@ exports[`select renders select groups successfully 1`] = `
43814382
<SelectOption
43824383
className=""
43834384
component="button"
4384-
index={0}
4385+
id="Other-3"
4386+
index={3}
43854387
isChecked={false}
43864388
isDisabled={false}
43874389
isFocused={false}
@@ -4399,6 +4401,7 @@ exports[`select renders select groups successfully 1`] = `
43994401
<button
44004402
aria-selected={null}
44014403
className="pf-c-select__menu-item"
4404+
id="Other-3"
44024405
onClick={[Function]}
44034406
onKeyDown={[Function]}
44044407
role="option"
@@ -4411,33 +4414,25 @@ exports[`select renders select groups successfully 1`] = `
44114414
</div>
44124415
</SelectGroup>
44134416
<SelectGroup
4414-
id="-1"
4415-
index={1}
4416-
isSelected={false}
44174417
key=".1"
4418-
keyHandler={[Function]}
44194418
label="group 2"
4420-
sendRef={[Function]}
4419+
titleId="group-2"
44214420
>
44224421
<div
44234422
className="pf-c-select__menu-group"
4424-
id="-1"
4425-
index={1}
4426-
isSelected={false}
4427-
keyHandler={[Function]}
4428-
sendRef={[Function]}
44294423
>
44304424
<div
44314425
aria-hidden={true}
44324426
className="pf-c-select__menu-group-title"
4433-
id=""
4427+
id="group-2"
44344428
>
44354429
group 2
44364430
</div>
44374431
<SelectOption
44384432
className=""
44394433
component="button"
4440-
index={0}
4434+
id="Mr-4"
4435+
index={4}
44414436
isChecked={false}
44424437
isDisabled={false}
44434438
isFocused={false}
@@ -4455,6 +4450,7 @@ exports[`select renders select groups successfully 1`] = `
44554450
<button
44564451
aria-selected={null}
44574452
className="pf-c-select__menu-item"
4453+
id="Mr-4"
44584454
onClick={[Function]}
44594455
onKeyDown={[Function]}
44604456
role="option"
@@ -4467,7 +4463,8 @@ exports[`select renders select groups successfully 1`] = `
44674463
<SelectOption
44684464
className=""
44694465
component="button"
4470-
index={0}
4466+
id="Mrs-5"
4467+
index={5}
44714468
isChecked={false}
44724469
isDisabled={false}
44734470
isFocused={false}
@@ -4485,6 +4482,7 @@ exports[`select renders select groups successfully 1`] = `
44854482
<button
44864483
aria-selected={null}
44874484
className="pf-c-select__menu-item"
4485+
id="Mrs-5"
44884486
onClick={[Function]}
44894487
onKeyDown={[Function]}
44904488
role="option"
@@ -4497,7 +4495,8 @@ exports[`select renders select groups successfully 1`] = `
44974495
<SelectOption
44984496
className=""
44994497
component="button"
4500-
index={0}
4498+
id="Ms-6"
4499+
index={6}
45014500
isChecked={false}
45024501
isDisabled={false}
45034502
isFocused={false}
@@ -4515,6 +4514,7 @@ exports[`select renders select groups successfully 1`] = `
45154514
<button
45164515
aria-selected={null}
45174516
className="pf-c-select__menu-item"
4517+
id="Ms-6"
45184518
onClick={[Function]}
45194519
onKeyDown={[Function]}
45204520
role="option"
@@ -4527,7 +4527,8 @@ exports[`select renders select groups successfully 1`] = `
45274527
<SelectOption
45284528
className=""
45294529
component="button"
4530-
index={0}
4530+
id="Other-7"
4531+
index={7}
45314532
isChecked={false}
45324533
isDisabled={false}
45334534
isFocused={false}
@@ -4545,6 +4546,7 @@ exports[`select renders select groups successfully 1`] = `
45454546
<button
45464547
aria-selected={null}
45474548
className="pf-c-select__menu-item"
4549+
id="Other-7"
45484550
onClick={[Function]}
45494551
onKeyDown={[Function]}
45504552
role="option"

0 commit comments

Comments
 (0)