Skip to content

Commit f87d898

Browse files
georgimkvilhan007
georgimkv
authored and
ilhan007
committed
fix(ui5-card-header): prevent events from action slot to trigger header's click event (#4965)
Fixes: #4891
1 parent 32479a2 commit f87d898

File tree

5 files changed

+147
-132
lines changed

5 files changed

+147
-132
lines changed

‎packages/base/hash.txt

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
FQQQvmWOx6YzN2Vive7SCT5CiJ4=
1+
bIOd1YxtRe25NFr5+QbNxHqOUFo=

‎packages/main/src/CardHeader.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
id="{{_id}}-status"
3636
part="status"
3737
class="ui5-card-header-status"
38-
dir="auto"
38+
dir="auto"
3939
>{{status}}</span>
4040
{{/if}}
4141
</div>

‎packages/main/src/CardHeader.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -241,15 +241,16 @@ class CardHeader extends UI5Element {
241241
}
242242

243243
_headerClick(event) {
244-
event.stopImmediatePropagation(); // prevents the native browser "click" event from firing
244+
// prevents the native browser "click" event from firing
245+
event.stopImmediatePropagation();
245246

246-
if (this.interactive) {
247+
if (this.interactive && event.target === event.currentTarget) {
247248
this.fireEvent("click");
248249
}
249250
}
250251

251252
_headerKeydown(event) {
252-
if (!this.interactive) {
253+
if (!this.interactive || event.target !== event.currentTarget) {
253254
return;
254255
}
255256

@@ -269,7 +270,7 @@ class CardHeader extends UI5Element {
269270
}
270271

271272
_headerKeyup(event) {
272-
if (!this.interactive) {
273+
if (!this.interactive || event.target !== event.currentTarget) {
273274
return;
274275
}
275276

‎packages/main/test/pages/Card.html

Lines changed: 125 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,9 @@
22
<html>
33

44
<head>
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
65
<meta charset="utf-8">
76
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
8-
97
<title>Card</title>
10-
118
<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
129
<script src="../../resources/bundle.esm.js" type="module"></script>
1310
<script nomodule src="../../resources/bundle.es5.js"></script>
@@ -16,152 +13,149 @@
1613
</head>
1714

1815
<body class="card1auto">
16+
<ui5-card id="card" class="myCard">
17+
<ui5-card-header
18+
id="cardHeader"
19+
slot="header"
20+
status="4 of 10"
21+
title-text="Quick Links"
22+
subtitle-text="quick links sub title"
23+
interactive>
24+
</ui5-card-header>
25+
26+
<ui5-list id="myList3" separators="Inner">
27+
<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
28+
<ui5-li icon="opportunity">Segmentation Models</ui5-li>
29+
<ui5-li icon="line-charts">Marketing plans</ui5-li>
30+
</ui5-list>
31+
32+
<ui5-input id="field" value="0" class="myInput"></ui5-input>
33+
</ui5-card>
1934

20-
<ui5-card
21-
id="card"
22-
class="myCard">
23-
<ui5-card-header
24-
id="cardHeader"
25-
slot="header"
26-
status="4 of 10"
27-
title-text="Quick Links"
28-
subtitle-text="quick links sub title"
29-
interactive>
30-
</ui5-card-header>
31-
<ui5-list id="myList3" separators="Inner">
32-
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
33-
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
34-
<ui5-li icon="line-charts" >Marketing plans</ui5-li>
35-
</ui5-list>
36-
37-
<ui5-input id="field" value="0" class="myInput"></ui5-input>
38-
</ui5-card>
39-
40-
<ui5-card
41-
id="card2"
42-
class="myCard">
43-
<ui5-card-header
44-
id="cardHeader2"
45-
slot="header"
46-
status="4 of 10"
47-
title-text="Quick Links"
48-
subtitle-text="quick links">
49-
<ui5-icon name="group" slot="avatar"></ui5-icon>
50-
</ui5-card-header>
51-
<ui5-list id="myList3" separators="Inner">
52-
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
53-
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
54-
</ui5-list>
55-
</ui5-card>
56-
57-
<ui5-card id="card3">
58-
<ui5-card-header
59-
id="cardHeader3"
60-
slot="header"
61-
title-text="Quick Links"
62-
subtitle-text="quick links">
63-
</ui5-card-header>
64-
<ui5-list id="myList3" separators="Inner">
65-
<ui5-li icon="horizontal-bullet-chart" >Template Based Segmentation</ui5-li>
66-
<ui5-li icon="opportunity" >Segmentation Models</ui5-li>
67-
</ui5-list>
68-
</ui5-card>
69-
70-
71-
<ui5-card class="myCard" id="actionCard">
72-
<ui5-card-header
73-
id="actionCardHeader"
74-
slot="header"
75-
title-text="Linked activities (5)"
76-
status="4 of 10">
77-
<ui5-button icon="add" slot="action" design="Transparent">
78-
Add activity
79-
</ui5-button>
80-
</ui5-card-header>
81-
<ui5-list id="myList3" separators="Inner">
82-
<ui5-li icon="horizontal-bullet-chart">
83-
Increase customer satisfaction by 10% using marketing methods
84-
</ui5-li>
85-
<ui5-li icon="opportunity">
86-
Get 1000 survey responses to annual employee survey
87-
</ui5-li>
88-
</ui5-list>
89-
</ui5-card>
90-
91-
<ui5-card class="myCard">
92-
<ui5-card-header
35+
<ui5-card id="card2" class="myCard">
36+
<ui5-card-header
37+
id="cardHeader2"
9338
slot="header"
94-
title-text="Linked activities (5)"
39+
status="4 of 10"
40+
title-text="Quick Links"
9541
subtitle-text="quick links">
9642
<ui5-icon name="group" slot="avatar"></ui5-icon>
9743
</ui5-card-header>
44+
9845
<ui5-list id="myList3" separators="Inner">
9946
<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
10047
<ui5-li icon="opportunity">Segmentation Models</ui5-li>
10148
</ui5-list>
10249
</ui5-card>
10350

10451
<ui5-card id="card3">
105-
<ui5-card-header id="cardHeader3" slot="header" title-text="Quick Links" subtitle-text="quick links">
52+
<ui5-card-header
53+
id="cardHeader3"
54+
slot="header"
55+
title-text="Quick Links"
56+
subtitle-text="quick links"
57+
interactive>
58+
<ui5-button slot="action">Act</ui5-button>
10659
</ui5-card-header>
60+
10761
<ui5-list id="myList3" separators="Inner">
10862
<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
10963
<ui5-li icon="opportunity">Segmentation Models</ui5-li>
11064
</ui5-list>
11165
</ui5-card>
11266

113-
11467
<ui5-card class="myCard" id="actionCard">
115-
<ui5-card-header id="actionCardHeader" slot="header" title-text="Linked activities (5)" status="4 of 10">
116-
<ui5-button icon="add" slot="action" design="Transparent">
117-
Add activity
118-
</ui5-button>
68+
<ui5-card-header
69+
id="actionCardHeader"
70+
slot="header"
71+
title-text="Linked activities (5)"
72+
status="4 of 10">
73+
<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
74+
</ui5-card-header>
75+
76+
<ui5-list id="myList3" separators="Inner">
77+
<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
78+
<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
79+
</ui5-list>
80+
</ui5-card>
81+
82+
<ui5-card class="myCard">
83+
<ui5-card-header
84+
slot="header"
85+
title-text="Linked activities (5)"
86+
subtitle-text="quick links">
87+
<ui5-icon name="group" slot="avatar"></ui5-icon>
88+
</ui5-card-header>
89+
90+
<ui5-list id="myList3" separators="Inner">
91+
<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
92+
<ui5-li icon="opportunity">Segmentation Models</ui5-li>
93+
</ui5-list>
94+
</ui5-card>
95+
96+
<ui5-card id="card4">
97+
<ui5-card-header
98+
id="cardHeader4"
99+
slot="header"
100+
title-text="Quick Links"
101+
subtitle-text="quick links">
119102
</ui5-card-header>
103+
120104
<ui5-list id="myList3" separators="Inner">
121-
<ui5-li icon="horizontal-bullet-chart">
122-
Increase customer satisfaction by 10% using marketing methods
123-
</ui5-li>
124-
<ui5-li icon="opportunity">
125-
Get 1000 survey responses to annual employee survey
126-
</ui5-li>
105+
<ui5-li icon="horizontal-bullet-chart">Template Based Segmentation</ui5-li>
106+
<ui5-li icon="opportunity">Segmentation Models</ui5-li>
107+
</ui5-list>
108+
</ui5-card>
109+
110+
<ui5-card class="myCard" id="actionCard2">
111+
<ui5-card-header
112+
id="actionCardHeader2"
113+
slot="header"
114+
title-text="Linked activities (5)"
115+
status="4 of 10">
116+
<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
117+
</ui5-card-header>
118+
119+
<ui5-list id="myList3" separators="Inner">
120+
<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
121+
<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
127122
</ui5-list>
128123
</ui5-card>
129124

130125
<ui5-card class="myCard">
131-
<ui5-card-header slot="header" title-text="Linked activities (5)" subtitle-text="quick links">
132-
<ui5-button icon="add" slot="action" design="Transparent">
133-
Add activity
134-
</ui5-button>
126+
<ui5-card-header
127+
slot="header"
128+
title-text="Linked activities (5)"
129+
subtitle-text="quick links">
130+
<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
135131
</ui5-card-header>
132+
136133
<ui5-list id="myList3" separators="Inner">
137-
<ui5-li icon="horizontal-bullet-chart">
138-
Increase customer satisfaction by 10% using marketing methods
139-
</ui5-li>
140-
<ui5-li icon="opportunity">
141-
Get 1000 survey responses to annual employee survey
142-
</ui5-li>
134+
<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
135+
<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
143136
</ui5-list>
144137
</ui5-card>
145138

146139
<ui5-card>
147-
<ui5-card-header slot="header" title-text="Linked activities (5)">
140+
<ui5-card-header
141+
slot="header"
142+
title-text="Linked activities (5)">
148143
<ui5-icon name="group" slot="avatar"></ui5-icon>
149-
<ui5-button icon="add" slot="action" design="Transparent">
150-
Add activity
151-
</ui5-button>
144+
<ui5-button icon="add" slot="action" design="Transparent">Add activity</ui5-button>
152145
</ui5-card-header>
146+
153147
<ui5-list id="myList3" separators="Inner">
154-
<ui5-li icon="horizontal-bullet-chart">
155-
Increase customer satisfaction by 10% using marketing methods
156-
</ui5-li>
157-
<ui5-li icon="opportunity">
158-
Get 1000 survey responses to annual employee survey
159-
</ui5-li>
148+
<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
149+
<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
160150
</ui5-list>
161151
</ui5-card>
162152

163153
<ui5-card id="textAreaAriaLabel" class="myCard">
164-
<ui5-card-header slot="header" id="header" status="4 of 10" title-text="Linked activities (5)"
154+
<ui5-card-header
155+
slot="header"
156+
id="header"
157+
status="4 of 10"
158+
title-text="Linked activities (5)"
165159
subtitle-text="quick links">
166160
</ui5-card-header>
167161
</ui5-card>
@@ -170,52 +164,57 @@
170164
<ui5-label id="infoText">info text</ui5-label>
171165

172166
<ui5-card id="textAreaAriaLabelledBy">
173-
<ui5-card-header slot="header" id="header2" title-text="New jobs (5)" subtitle-text="find one">
167+
<ui5-card-header
168+
slot="header"
169+
id="header2"
170+
title-text="New jobs (5)"
171+
subtitle-text="find one">
174172
</ui5-card-header>
175173
</ui5-card>
176174

177175
<ui5-card id="textAreaAriaLabelledBy">
178176
<div slot="header" id="header2" class="myHeader">
179177
Test
180178
</div>
179+
181180
<ui5-list id="myList3" separators="Inner">
182-
<ui5-li icon="horizontal-bullet-chart">
183-
Increase customer satisfaction by 10% using marketing methods
184-
</ui5-li>
185-
<ui5-li icon="opportunity">
186-
Get 1000 survey responses to annual employee survey
187-
</ui5-li>
181+
<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
182+
<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
188183
</ui5-list>
189184
</ui5-card>
190185

191186
<ui5-card>
192187
<ui5-list id="myList3" separators="Inner">
193-
<ui5-li icon="horizontal-bullet-chart">
194-
Increase customer satisfaction by 10% using marketing methods
195-
</ui5-li>
196-
<ui5-li icon="opportunity">
197-
Get 1000 survey responses to annual employee survey
198-
</ui5-li>
188+
<ui5-li icon="horizontal-bullet-chart">Increase customer satisfaction by 10% using marketing methods</ui5-li>
189+
<ui5-li icon="opportunity">Get 1000 survey responses to annual employee survey</ui5-li>
199190
</ui5-list>
200191
</ui5-card>
201192

202193
<ui5-card id="textCard" accessible-name="Internships">
203-
<ui5-card-header slot="header" id="header4" title-text="New Internships">
194+
<ui5-card-header
195+
slot="header"
196+
id="header4"
197+
title-text="New Internships">
204198
</ui5-card-header>
205199
</ui5-card>
206200

207201
<ui5-card id="textCardRef" accessible-name="Internships" accessible-name-ref="cont">
208-
<ui5-card-header slot="header" id="header5" title-text="New Positions">
202+
<ui5-card-header
203+
id="header5"
204+
slot="header"
205+
title-text="New Positions">
209206
</ui5-card-header>
207+
210208
<div id="cont" class="myContent">I am the content</div>
211209
</ui5-card>
210+
212211
<script>
213212
function onClick(event) {
214213
console.log(event);
215214
field.value = parseInt(field.value) + 1;
216215
}
217216

218-
[cardHeader, cardHeader2].forEach(function (el) {
217+
[cardHeader, cardHeader2, cardHeader3].forEach(function (el) {
219218
el.addEventListener("ui5-click", onClick);
220219
});
221220
</script>

0 commit comments

Comments
 (0)