Skip to content

Commit 4cbe3de

Browse files
MapTo0MapTo0
authored
fix: prevent dual event dispatching in no conflict mode (#363)
- all controls should now listen for prefixed events ui5-* - all test run with no conflict setting, therefore test pages should interact with ui5-* events - both events are now dispatched in normal mode - in no conflict mode - just the prefixed event is dispatched Fixes: #304
1 parent 4b64a9c commit 4cbe3de

39 files changed

+128
-130
lines changed

‎packages/base/src/Configuration.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,10 @@ const getWCNoConflict = () => {
3737
return CONFIGURATION["xx-wc-no-conflict"];
3838
};
3939

40+
const _setWCNoConflict = value => {
41+
CONFIGURATION["xx-wc-no-conflict"] = value;
42+
};
43+
4044
/* Calendar stuff */
4145
const getCalendarType = () => {
4246
if (CONFIGURATION.calendarType) {
@@ -125,6 +129,7 @@ export {
125129
getCalendarType,
126130
getLocale,
127131
_setTheme,
132+
_setWCNoConflict,
128133
getSupportedLanguages,
129134
getOriginInfo,
130135
};

‎packages/base/src/UI5Element.js

Lines changed: 16 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -502,29 +502,32 @@ class UI5Element extends HTMLElement {
502502
*/
503503
fireEvent(name, data, cancelable) {
504504
let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
505+
const noConflict = getWCNoConflict();
505506

506-
let customEvent = new CustomEvent(name, {
507+
const noConflictEvent = new CustomEvent(`ui5-${name}`, {
507508
detail: data,
508509
composed: false,
509510
bubbles: true,
510511
cancelable,
511512
});
512513

513-
// This will be false if the normal event is prevented
514-
const normalEventResult = this.dispatchEvent(customEvent);
514+
// This will be false if the compat event is prevented
515+
compatEventResult = this.dispatchEvent(noConflictEvent);
515516

516-
if (UI5Element.noConflictEvents.includes(name)) {
517-
customEvent = new CustomEvent(`ui5-${name}`, {
518-
detail: data,
519-
composed: false,
520-
bubbles: true,
521-
cancelable,
522-
});
523-
524-
// This will be false if the compat event is prevented
525-
compatEventResult = this.dispatchEvent(customEvent);
517+
if (noConflict === true || (noConflict.events && noConflict.events.includes && noConflict.events.includes(name))) {
518+
return compatEventResult;
526519
}
527520

521+
const customEvent = new CustomEvent(name, {
522+
detail: data,
523+
composed: false,
524+
bubbles: true,
525+
cancelable,
526+
});
527+
528+
// This will be false if the normal event is prevented
529+
const normalEventResult = this.dispatchEvent(customEvent);
530+
528531
// Return false if any of the two events was prevented (its result was false).
529532
return normalEventResult && compatEventResult;
530533
}
@@ -610,18 +613,6 @@ class UI5Element extends HTMLElement {
610613
},
611614
});
612615
}
613-
614-
static get noConflictEvents() {
615-
if (!this._noConflictEvents) {
616-
const noConflictConfig = getWCNoConflict();
617-
this._noConflictEvents = [];
618-
if (typeof noConflictConfig === "object" && typeof noConflictConfig.events === "string") {
619-
this._noConflictEvents = noConflictConfig.events.split(",").map(evtName => evtName.trim());
620-
}
621-
}
622-
623-
return this._noConflictEvents;
624-
}
625616
}
626617
const kebabToCamelCase = string => toCamelCase(string.split("-"));
627618
const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();

‎packages/main/src/Calendar.hbs

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
month-text="{{ctr._header.monthText}}"
66
year-text="{{ctr._header.yearText}}"
77
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
8-
@pressPrevious="{{ctr._header.onPressPrevious}}"
9-
@pressNext="{{ctr._header.onPressNext}}"
10-
@btn1Press="{{ctr._header.onBtn1Press}}"
11-
@btn2Press="{{ctr._header.onBtn2Press}}"
8+
@ui5-pressPrevious="{{ctr._header.onPressPrevious}}"
9+
@ui5-pressNext="{{ctr._header.onPressNext}}"
10+
@ui5-btn1Press="{{ctr._header.onBtn1Press}}"
11+
@ui5-btn2Press="{{ctr._header.onBtn2Press}}"
1212
></ui5-calendar-header>
1313

1414
<div id="{{ctr._id}}-content" class="sapUiCalContent">
@@ -20,8 +20,8 @@
2020
._hidden="{{ctr._oMonth._hidden}}"
2121
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
2222
timestamp="{{ctr._oMonth.timestamp}}"
23-
@selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
24-
@navigate="{{ctr._oMonth.onNavigate}}"
23+
@ui5-selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
24+
@ui5-navigate="{{ctr._oMonth.onNavigate}}"
2525
></ui5-daypicker>
2626

2727
<ui5-month-picker
@@ -30,7 +30,7 @@
3030
._hidden="{{ctr._monthPicker._hidden}}"
3131
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
3232
timestamp="{{ctr._monthPicker.timestamp}}"
33-
@selectedMonthChange="{{ctr._monthPicker.onSelectedMonthChange}}"
33+
@ui5-selectedMonthChange="{{ctr._monthPicker.onSelectedMonthChange}}"
3434
></ui5-month-picker>
3535

3636
<ui5-yearpicker
@@ -40,7 +40,7 @@
4040
.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
4141
timestamp="{{ctr._yearPicker.timestamp}}"
4242
._selectedYear="{{ctr._yearPicker._selectedYear}}"
43-
@selectedYearChange="{{ctr._yearPicker.onSelectedYearChange}}"
43+
@ui5-selectedYearChange="{{ctr._yearPicker.onSelectedYearChange}}"
4444
></ui5-yearpicker>
4545
</div>
4646
</div>

‎packages/main/src/DatePicker.hbs

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
?disabled="{{ctr.disabled}}"
1212
?readonly="{{ctr.readonly}}"
1313
value-state="{{ctr.valueState}}"
14-
@change="{{ctr._input.onChange}}"
15-
@input="{{ctr._input.onLiveChange}}"
14+
@ui5-change="{{ctr._input.onChange}}"
15+
@ui5-input="{{ctr._input.onLiveChange}}"
1616
data-sap-focus-ref
1717
>
1818
{{#if showIcon}}
@@ -35,8 +35,8 @@
3535
horizontal-align="{{ctr._popover.horizontalAlign}}"
3636
stay-open-on-scroll="{{ctr._popover.stayOpenOnScroll}}"
3737
.customClasses="{{ctr._popover._customClasses}}"
38-
@afterClose="{{ctr._popover.afterClose}}"
39-
@afterOpen="{{ctr._popover.afterOpen}}"
38+
@ui5-afterClose="{{ctr._popover.afterClose}}"
39+
@ui5-afterOpen="{{ctr._popover.afterOpen}}"
4040
>
4141
<ui5-calendar
4242
id="{{ctr._id}}-calendar"
@@ -45,7 +45,7 @@
4545
format-pattern="{{ctr._calendar.formatPattern}}"
4646
timestamp="{{ctr._calendar.timestamp}}"
4747
.selectedDates="{{ctr._calendar.selectedDates}}"
48-
@selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
48+
@ui5-selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
4949
></ui5-calendar>
5050
</ui5-popover>
5151

‎packages/main/src/List.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -243,11 +243,11 @@ class List extends UI5Element {
243243

244244
this._previouslySelectedItem = null;
245245

246-
this.addEventListener("_press", this.onItemPress.bind(this));
247-
this.addEventListener("_focused", this.onItemFocused.bind(this));
248-
this.addEventListener("_forwardAfter", this.onForwardAfter.bind(this));
249-
this.addEventListener("_forwardBefore", this.onForwardBefore.bind(this));
250-
this.addEventListener("_selectionRequested", this.onSelectionRequested.bind(this));
246+
this.addEventListener("ui5-_press", this.onItemPress.bind(this));
247+
this.addEventListener("ui5-_focused", this.onItemFocused.bind(this));
248+
this.addEventListener("ui5-_forwardAfter", this.onForwardAfter.bind(this));
249+
this.addEventListener("ui5-_forwardBefore", this.onForwardBefore.bind(this));
250+
this.addEventListener("ui5-_selectionRequested", this.onSelectionRequested.bind(this));
251251
}
252252

253253
onBeforeRendering() {

‎packages/main/src/ListItem.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
id="{{ctr._id}}-deleteSelectionControl"
4949
type="Transparent"
5050
icon="sap-icon://decline"
51-
@press="{{ctr._fnOnDelete}}"
51+
@ui5-press="{{ctr._fnOnDelete}}"
5252
></ui5-button>
5353
</div>
5454
{{/if}}

‎packages/main/src/MessageStrip.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
class="{{classes.closeIcon}}"
1111
src="sap-icon://decline"
1212
tabindex="0"
13-
@press="{{ctr._closeButton.press}}">
13+
@ui5-press="{{ctr._closeButton.press}}">
1414
</ui5-icon>
1515
{{/unless}}
1616
</div>

‎packages/main/src/Panel.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
tabindex="{{iconTabIndex}}"
1717
aria-expanded="{{expanded}}"
1818
aria-labelledby="{{ariaLabelledBy}}"
19-
@press="{{ctr._icon.press}}"
19+
@ui5-press="{{ctr._icon.press}}"
2020
></ui5-icon>
2121
{{> header}}
2222
</header>

‎packages/main/src/Select.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
<ui5-icon
2626
src="sap-icon://slim-arrow-down"
2727
class="sapWCSelectDropDownIcon"
28-
@press="{{ctr._fnClickSelectBox}}"
28+
@ui5-press="{{ctr._fnClickSelectBox}}"
2929
></ui5-icon>
3030
</div>

‎packages/main/src/ShellBar.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
{{/if}}
2828

2929
<ui5-popover class="sapWCShellBarMenuPopover" hide-header placement-type="Bottom">
30-
<ui5-list separators="None" mode="SingleSelect" @itemPress={{ctr._menuItemPress}}>
30+
<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{ctr._menuItemPress}}>
3131
{{#each ctr.menuItems}}
3232
<slot name="{{this._slot}}"></slot>
3333
{{/each}}
@@ -58,7 +58,7 @@
5858
src="{{this.src}}"
5959
id="{{this.id}}"
6060
style="{{this.style}}"
61-
@press={{this.press}}>
61+
@ui5-press={{this.press}}>
6262
</ui5-icon>
6363
{{else}}
6464
<div
@@ -76,13 +76,13 @@
7676
</div>
7777

7878
<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
79-
<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
79+
<ui5-list separators="None" @ui5-itemPress="{{ctr._actionList.itemPress}}">
8080
{{#each _hiddenIcons}}
8181
<ui5-li
8282
data-ui5-external-action-item-id="{{this.refItemid}}"
8383
icon="{{this.src}}"
8484
type="Active"
85-
@_press="{{this.press}}"
85+
@ui5-_press="{{this.press}}"
8686
>{{this.text}}
8787
</ui5-li>
8888
{{/each}}

‎packages/main/src/Suggestions.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -118,10 +118,10 @@ class Suggestions {
118118

119119
_attachItemsListeners() {
120120
const list = this._getList();
121-
list.removeEventListener("itemPress", this.fnOnSuggestionItemPress);
122-
list.addEventListener("itemPress", this.fnOnSuggestionItemPress);
123-
list.removeEventListener("itemFocused", this.fnOnSuggestionItemFocus);
124-
list.addEventListener("itemFocused", this.fnOnSuggestionItemFocus);
121+
list.removeEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
122+
list.addEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
123+
list.removeEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
124+
list.addEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
125125
}
126126

127127
_attachPopupListeners() {
@@ -130,12 +130,12 @@ class Suggestions {
130130
}
131131

132132
if (!this.attachedAfterOpened) {
133-
this._getPopover().addEventListener("afterOpen", this._onOpen.bind(this));
133+
this._getPopover().addEventListener("ui5-afterOpen", this._onOpen.bind(this));
134134
this.attachedAfterOpened = true;
135135
}
136136

137137
if (!this.attachedAfterClose) {
138-
this._getPopover().addEventListener("afterClose", this._onClose.bind(this));
138+
this._getPopover().addEventListener("ui5-afterClose", this._onClose.bind(this));
139139
this.attachedAfterClose = true;
140140
}
141141
}

‎packages/main/src/TabContainer.hbs

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div {{> controlData}} class="{{classes.main}}">
22
<div class="{{classes.header}}" id="{{ctr._id}}-header">
3-
<ui5-icon @press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
3+
<ui5-icon @ui5-press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
44

55
<!-- tab items -->
66
<div class="{{classes.headerScrollContainer}}" id="{{ctr._id}}-headerScrollContainer">
@@ -42,12 +42,12 @@
4242
</ul>
4343
</div>
4444

45-
<ui5-icon @press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
45+
<ui5-icon @ui5-press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
4646

4747
<!-- overflow button -->
4848
{{#if ctr.showOverflow}}
4949
<ui5-button
50-
@press="{{ctr._overflowButton.click}}"
50+
@ui5-press="{{ctr._overflowButton.click}}"
5151
class="{{classes.overflowButton}}"
5252
icon="sap-icon://slim-arrow-down"
5353
type="Transparent"
@@ -73,7 +73,7 @@
7373
hide-header
7474
placement-type="Bottom"
7575
horizontal-align="Right">
76-
<ui5-list @itemPress="{{ctr._overflowList.click}}">
76+
<ui5-list @ui5-itemPress="{{ctr._overflowList.click}}">
7777
{{#each renderItems}}
7878
{{#unless this.isSeparator}}
7979
<ui5-li-custom id="{{this.item._id}}"

‎packages/main/src/Table.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -181,8 +181,8 @@ class Table extends UI5Element {
181181

182182
this.rows.forEach(row => {
183183
row._columnsInfo = columnSettings;
184-
row.removeEventListener("_focused", this.fnOnRowFocused);
185-
row.addEventListener("_focused", this.fnOnRowFocused);
184+
row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
185+
row.addEventListener("ui5-_focused", this.fnOnRowFocused);
186186
});
187187
}
188188

‎packages/main/src/TimelineItem.hbs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
{{#*inline "itemName"}}
2727
{{#if ctr.itemNameClickable}}
28-
<ui5-link @press="{{ctr._onItemNamePress}}">{{ctr.itemName}}</ui5-link>
28+
<ui5-link @ui5-press="{{ctr._onItemNamePress}}">{{ctr.itemName}}</ui5-link>
2929
{{/if}}
3030

3131
{{#unless ctr.itemNameClickable}}

‎packages/main/test/sap/ui/webcomponents/main/pages/Button.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@
156156
var counter = 0;
157157

158158
[button, disabledButton].forEach(function (el) {
159-
el.addEventListener("press", function(event) {
159+
el.addEventListener("ui5-press", function(event) {
160160
counter += 1;
161161
input.value = counter;
162162
});

‎packages/main/test/sap/ui/webcomponents/main/pages/Card.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
</ui5-card>
4545

4646
<script>
47-
card.addEventListener("headerPress", function (event) {
47+
card.addEventListener("ui5-headerPress", function (event) {
4848
console.log(event);
4949
field.value = parseInt(field.value) + 1;
5050
});

‎packages/main/test/sap/ui/webcomponents/main/pages/CheckBox.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
var counter = 0;
3838

3939
[checkBox1, checkBox2].forEach(function(el) {
40-
el.addEventListener("change", function(event) {
40+
el.addEventListener("ui5-change", function(event) {
4141
counter += 1;
4242
input.value = counter;
4343
});

‎packages/main/test/sap/ui/webcomponents/main/pages/DatePicker.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,11 +92,11 @@ <h3>japanese calendar type</h3>
9292
dp.addEventListener('keydown', function() { console.log('keydown')});
9393
dp.addEventListener('blur', function() { console.log('blur')});
9494

95-
dp.addEventListener('change', function(e) {
95+
dp.addEventListener('ui5-change', function(e) {
9696
console.log('change: ', e.detail);
9797
labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
9898
});
99-
dp.addEventListener('liveChange', function(e) {
99+
dp.addEventListener('ui5-liveChange', function(e) {
100100
console.log('liveChange: ', e.detail);
101101
labelLiveChange.innerHTML = 'liveChange: ' + JSON.stringify(e.detail);
102102
});

‎packages/main/test/sap/ui/webcomponents/main/pages/DatePicker_test_page.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@
6262
document.querySelector('#lbl').innerHTML = ++counter;
6363
}
6464

65-
document.querySelector("#dp5").addEventListener("change", increaseCounter);
66-
document.querySelector("#dp8").addEventListener("change", increaseCounter);
67-
document.querySelector("#dp13").addEventListener("change", function(e) {
65+
document.querySelector("#dp5").addEventListener("ui5-change", increaseCounter);
66+
document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
67+
document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
6868
document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
6969
document.querySelector('#lblTomorrowDate').innerHTML = e.target.value;
7070
});

‎packages/main/test/sap/ui/webcomponents/main/pages/Dialog.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,10 @@
3939
</ui5-dialog>
4040

4141
<script>
42-
btnOpenDialog.addEventListener("press", function() {
42+
btnOpenDialog.addEventListener("ui5-press", function() {
4343
dialog.open();
4444
});
45-
btnCloseDialog.addEventListener("press", function() {
45+
btnCloseDialog.addEventListener("ui5-press", function() {
4646
dialog.close();
4747
});
4848
</script>

0 commit comments

Comments
 (0)