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

packages/base/src/Configuration.js

@@ -37,6 +37,10 @@ const getWCNoConflict = () => {
 	return CONFIGURATION["xx-wc-no-conflict"];
 };
 
+const _setWCNoConflict = value => {
+	CONFIGURATION["xx-wc-no-conflict"] = value;
+};
+
 /* Calendar stuff */
 const getCalendarType = () => {
 	if (CONFIGURATION.calendarType) {
@@ -125,6 +129,7 @@ export {
 	getCalendarType,
 	getLocale,
 	_setTheme,
+	_setWCNoConflict,
 	getSupportedLanguages,
 	getOriginInfo,
 };

packages/base/src/UI5Element.js

@@ -502,29 +502,32 @@ class UI5Element extends HTMLElement {
 	 */
 	fireEvent(name, data, cancelable) {
 		let compatEventResult = true; // Initialized to true, because if the event is not fired at all, it should be considered "not-prevented"
+		const noConflict = getWCNoConflict();
 
-		let customEvent = new CustomEvent(name, {
+		const noConflictEvent = new CustomEvent(`ui5-${name}`, {
 			detail: data,
 			composed: false,
 			bubbles: true,
 			cancelable,
 		});
 
-		// This will be false if the normal event is prevented
-		const normalEventResult = this.dispatchEvent(customEvent);
+		// This will be false if the compat event is prevented
+		compatEventResult = this.dispatchEvent(noConflictEvent);
 
-		if (UI5Element.noConflictEvents.includes(name)) {
-			customEvent = new CustomEvent(`ui5-${name}`, {
-				detail: data,
-				composed: false,
-				bubbles: true,
-				cancelable,
-			});
-
-			// This will be false if the compat event is prevented
-			compatEventResult = this.dispatchEvent(customEvent);
+		if (noConflict === true || (noConflict.events && noConflict.events.includes && noConflict.events.includes(name))) {
+			return compatEventResult;
 		}
 
+		const customEvent = new CustomEvent(name, {
+			detail: data,
+			composed: false,
+			bubbles: true,
+			cancelable,
+		});
+
+		// This will be false if the normal event is prevented
+		const normalEventResult = this.dispatchEvent(customEvent);
+
 		// Return false if any of the two events was prevented (its result was false).
 		return normalEventResult && compatEventResult;
 	}
@@ -610,18 +613,6 @@ class UI5Element extends HTMLElement {
 			},
 		});
 	}
-
-	static get noConflictEvents() {
-		if (!this._noConflictEvents) {
-			const noConflictConfig = getWCNoConflict();
-			this._noConflictEvents = [];
-			if (typeof noConflictConfig === "object" && typeof noConflictConfig.events === "string") {
-				this._noConflictEvents = noConflictConfig.events.split(",").map(evtName => evtName.trim());
-			}
-		}
-
-		return this._noConflictEvents;
-	}
 }
 const kebabToCamelCase = string => toCamelCase(string.split("-"));
 const camelToKebabCase = string => string.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();

packages/main/src/Calendar.hbs

@@ -5,10 +5,10 @@
 		month-text="{{ctr._header.monthText}}"
 		year-text="{{ctr._header.yearText}}"
 		.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
-		@pressPrevious="{{ctr._header.onPressPrevious}}"
-		@pressNext="{{ctr._header.onPressNext}}"
-		@btn1Press="{{ctr._header.onBtn1Press}}"
-		@btn2Press="{{ctr._header.onBtn2Press}}"
+		@ui5-pressPrevious="{{ctr._header.onPressPrevious}}"
+		@ui5-pressNext="{{ctr._header.onPressNext}}"
+		@ui5-btn1Press="{{ctr._header.onBtn1Press}}"
+		@ui5-btn2Press="{{ctr._header.onBtn2Press}}"
 	></ui5-calendar-header>
 
 	<div id="{{ctr._id}}-content" class="sapUiCalContent">
@@ -20,8 +20,8 @@
 			._hidden="{{ctr._oMonth._hidden}}"
 			.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
 			timestamp="{{ctr._oMonth.timestamp}}"
-			@selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
-			@navigate="{{ctr._oMonth.onNavigate}}"
+			@ui5-selectionChange="{{ctr._oMonth.onSelectedDatesChange}}"
+			@ui5-navigate="{{ctr._oMonth.onNavigate}}"
 		></ui5-daypicker>
 
 		<ui5-month-picker
@@ -30,7 +30,7 @@
 			._hidden="{{ctr._monthPicker._hidden}}"
 			.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
 			timestamp="{{ctr._monthPicker.timestamp}}"
-			@selectedMonthChange="{{ctr._monthPicker.onSelectedMonthChange}}"
+			@ui5-selectedMonthChange="{{ctr._monthPicker.onSelectedMonthChange}}"
 		></ui5-month-picker>
 
 		<ui5-yearpicker
@@ -40,7 +40,7 @@
 				.primaryCalendarType="{{ctr._oMonth.primaryCalendarType}}"
 				timestamp="{{ctr._yearPicker.timestamp}}"
 				._selectedYear="{{ctr._yearPicker._selectedYear}}"
-				@selectedYearChange="{{ctr._yearPicker.onSelectedYearChange}}"
+				@ui5-selectedYearChange="{{ctr._yearPicker.onSelectedYearChange}}"
 		></ui5-yearpicker>
 	</div>
 </div>

packages/main/src/DatePicker.hbs

@@ -11,8 +11,8 @@
 			?disabled="{{ctr.disabled}}"
 			?readonly="{{ctr.readonly}}"
 			value-state="{{ctr.valueState}}"
-			@change="{{ctr._input.onChange}}"
-			@input="{{ctr._input.onLiveChange}}"
+			@ui5-change="{{ctr._input.onChange}}"
+			@ui5-input="{{ctr._input.onLiveChange}}"
 			data-sap-focus-ref
 	>
 		{{#if showIcon}}
@@ -35,8 +35,8 @@
 			horizontal-align="{{ctr._popover.horizontalAlign}}"
 			stay-open-on-scroll="{{ctr._popover.stayOpenOnScroll}}"
 			.customClasses="{{ctr._popover._customClasses}}"
-			@afterClose="{{ctr._popover.afterClose}}"
-			@afterOpen="{{ctr._popover.afterOpen}}"
+			@ui5-afterClose="{{ctr._popover.afterClose}}"
+			@ui5-afterOpen="{{ctr._popover.afterOpen}}"
 	>
 		<ui5-calendar
 				id="{{ctr._id}}-calendar"
@@ -45,7 +45,7 @@
 				format-pattern="{{ctr._calendar.formatPattern}}"
 				timestamp="{{ctr._calendar.timestamp}}"
 				.selectedDates="{{ctr._calendar.selectedDates}}"
-				@selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
+				@ui5-selectedDatesChange="{{ctr._calendar.onSelectedDatesChange}}"
 		></ui5-calendar>
 	</ui5-popover>
 

packages/main/src/List.js

@@ -243,11 +243,11 @@ class List extends UI5Element {
 
 		this._previouslySelectedItem = null;
 
-		this.addEventListener("_press", this.onItemPress.bind(this));
-		this.addEventListener("_focused", this.onItemFocused.bind(this));
-		this.addEventListener("_forwardAfter", this.onForwardAfter.bind(this));
-		this.addEventListener("_forwardBefore", this.onForwardBefore.bind(this));
-		this.addEventListener("_selectionRequested", this.onSelectionRequested.bind(this));
+		this.addEventListener("ui5-_press", this.onItemPress.bind(this));
+		this.addEventListener("ui5-_focused", this.onItemFocused.bind(this));
+		this.addEventListener("ui5-_forwardAfter", this.onForwardAfter.bind(this));
+		this.addEventListener("ui5-_forwardBefore", this.onForwardBefore.bind(this));
+		this.addEventListener("ui5-_selectionRequested", this.onSelectionRequested.bind(this));
 	}
 
 	onBeforeRendering() {

packages/main/src/ListItem.hbs

@@ -48,7 +48,7 @@
 				id="{{ctr._id}}-deleteSelectionControl"
 				type="Transparent"
 				icon="sap-icon://decline"
-				@press="{{ctr._fnOnDelete}}"
+				@ui5-press="{{ctr._fnOnDelete}}"
 			></ui5-button>
 		</div>
 	{{/if}}

packages/main/src/MessageStrip.hbs

@@ -10,7 +10,7 @@
 			class="{{classes.closeIcon}}"
 			src="sap-icon://decline"
 			tabindex="0"
-			@press="{{ctr._closeButton.press}}">
+			@ui5-press="{{ctr._closeButton.press}}">
 		</ui5-icon>
 	{{/unless}}
 </div>

packages/main/src/Panel.hbs

@@ -16,7 +16,7 @@
 				tabindex="{{iconTabIndex}}"
 				aria-expanded="{{expanded}}"
 				aria-labelledby="{{ariaLabelledBy}}"
-				@press="{{ctr._icon.press}}"
+				@ui5-press="{{ctr._icon.press}}"
 			></ui5-icon>
 			{{> header}}
 		</header>

packages/main/src/Select.hbs

@@ -25,6 +25,6 @@
 	<ui5-icon
 		src="sap-icon://slim-arrow-down"
 		class="sapWCSelectDropDownIcon"
-		@press="{{ctr._fnClickSelectBox}}"
+		@ui5-press="{{ctr._fnClickSelectBox}}"
 	></ui5-icon>
 </div>

packages/main/src/ShellBar.hbs

@@ -27,7 +27,7 @@
 		{{/if}}
 
 		<ui5-popover class="sapWCShellBarMenuPopover" hide-header placement-type="Bottom">
-			<ui5-list separators="None" mode="SingleSelect" @itemPress={{ctr._menuItemPress}}>
+			<ui5-list separators="None" mode="SingleSelect" @ui5-itemPress={{ctr._menuItemPress}}>
 				{{#each ctr.menuItems}}
 					<slot name="{{this._slot}}"></slot>
 				{{/each}}
@@ -58,7 +58,7 @@
 						src="{{this.src}}"
 						id="{{this.id}}"
 						style="{{this.style}}"
-						@press={{this.press}}>
+						@ui5-press={{this.press}}>
 					</ui5-icon>
 				{{else}}
 					<div
@@ -76,13 +76,13 @@
 	</div>
 
 	<ui5-popover class="sapWCShellBarOverflowPopover" placement-type="Bottom" horizontal-align="{{popoverHorizontalAlign}}" hide-header hide-arrow>
-		<ui5-list separators="None" @itemPress="{{ctr._actionList.itemPress}}">
+		<ui5-list separators="None" @ui5-itemPress="{{ctr._actionList.itemPress}}">
 			{{#each _hiddenIcons}}
 				<ui5-li
 					data-ui5-external-action-item-id="{{this.refItemid}}" 
 					icon="{{this.src}}"
 					type="Active"
-					@_press="{{this.press}}"
+					@ui5-_press="{{this.press}}"
 				>{{this.text}}
 				</ui5-li>
 			{{/each}}

packages/main/src/Suggestions.js

@@ -118,10 +118,10 @@ class Suggestions {
 
 	_attachItemsListeners() {
 		const list = this._getList();
-		list.removeEventListener("itemPress", this.fnOnSuggestionItemPress);
-		list.addEventListener("itemPress", this.fnOnSuggestionItemPress);
-		list.removeEventListener("itemFocused", this.fnOnSuggestionItemFocus);
-		list.addEventListener("itemFocused", this.fnOnSuggestionItemFocus);
+		list.removeEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
+		list.addEventListener("ui5-itemPress", this.fnOnSuggestionItemPress);
+		list.removeEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
+		list.addEventListener("ui5-itemFocused", this.fnOnSuggestionItemFocus);
 	}
 
 	_attachPopupListeners() {
@@ -130,12 +130,12 @@ class Suggestions {
 		}
 
 		if (!this.attachedAfterOpened) {
-			this._getPopover().addEventListener("afterOpen", this._onOpen.bind(this));
+			this._getPopover().addEventListener("ui5-afterOpen", this._onOpen.bind(this));
 			this.attachedAfterOpened = true;
 		}
 
 		if (!this.attachedAfterClose) {
-			this._getPopover().addEventListener("afterClose", this._onClose.bind(this));
+			this._getPopover().addEventListener("ui5-afterClose", this._onClose.bind(this));
 			this.attachedAfterClose = true;
 		}
 	}

packages/main/src/TabContainer.hbs

@@ -1,6 +1,6 @@
 <div {{> controlData}} class="{{classes.main}}">
 	<div class="{{classes.header}}" id="{{ctr._id}}-header">
-		<ui5-icon @press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
+		<ui5-icon @ui5-press="{{ctr._headerBackArrow.click}}" class="{{classes.headerBackArrow}}" src="sap-icon://slim-arrow-left" tabindex="-1"></ui5-icon>
 
 		<!-- tab items -->
 		<div class="{{classes.headerScrollContainer}}" id="{{ctr._id}}-headerScrollContainer">
@@ -42,12 +42,12 @@
 			</ul>
 		</div>
 
-		<ui5-icon @press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
+		<ui5-icon @ui5-press="{{ctr._headerForwardArrow.click}}" class="{{classes.headerForwardArrow}}" src="sap-icon://slim-arrow-right" tabindex="-1"></ui5-icon>
 
 		<!-- overflow button -->
 		{{#if ctr.showOverflow}}
 			<ui5-button
-				@press="{{ctr._overflowButton.click}}"
+				@ui5-press="{{ctr._overflowButton.click}}"
 				class="{{classes.overflowButton}}"
 				icon="sap-icon://slim-arrow-down"
 				type="Transparent"
@@ -73,7 +73,7 @@
 		hide-header
 		placement-type="Bottom"
 		horizontal-align="Right">
-		<ui5-list @itemPress="{{ctr._overflowList.click}}">
+		<ui5-list @ui5-itemPress="{{ctr._overflowList.click}}">
 			{{#each renderItems}}
 				{{#unless this.isSeparator}}
 					<ui5-li-custom id="{{this.item._id}}"

packages/main/src/Table.js

@@ -181,8 +181,8 @@ class Table extends UI5Element {
 
 		this.rows.forEach(row => {
 			row._columnsInfo = columnSettings;
-			row.removeEventListener("_focused", this.fnOnRowFocused);
-			row.addEventListener("_focused", this.fnOnRowFocused);
+			row.removeEventListener("ui5-_focused", this.fnOnRowFocused);
+			row.addEventListener("ui5-_focused", this.fnOnRowFocused);
 		});
 	}
 

packages/main/src/TimelineItem.hbs

@@ -25,7 +25,7 @@
 
 {{#*inline "itemName"}}
 	{{#if ctr.itemNameClickable}}
-		<ui5-link @press="{{ctr._onItemNamePress}}">{{ctr.itemName}}</ui5-link>
+		<ui5-link @ui5-press="{{ctr._onItemNamePress}}">{{ctr.itemName}}</ui5-link>
 	{{/if}}
 
 	{{#unless ctr.itemNameClickable}}

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

@@ -156,7 +156,7 @@
 		var counter = 0;
 
 		[button, disabledButton].forEach(function (el) {
-			el.addEventListener("press", function(event) {
+			el.addEventListener("ui5-press", function(event) {
 				counter += 1;
 				input.value = counter;
 			});

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

@@ -44,7 +44,7 @@
 </ui5-card>
 
 <script>
-	card.addEventListener("headerPress", function (event) {
+	card.addEventListener("ui5-headerPress", function (event) {
 		console.log(event);
 		field.value = parseInt(field.value) + 1;
 	});

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

@@ -37,7 +37,7 @@
 		var counter = 0;
 
 		[checkBox1, checkBox2].forEach(function(el) {
-			el.addEventListener("change", function(event) {
+			el.addEventListener("ui5-change", function(event) {
 				counter += 1;
 				input.value = counter;
 			});

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

@@ -92,11 +92,11 @@ <h3>japanese calendar type</h3>
 		dp.addEventListener('keydown', function() { console.log('keydown')});
 		dp.addEventListener('blur', function() { console.log('blur')});
 
-		dp.addEventListener('change', function(e) {
+		dp.addEventListener('ui5-change', function(e) {
 			console.log('change: ', e.detail);
 			labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
 		});
-		dp.addEventListener('liveChange', function(e) {
+		dp.addEventListener('ui5-liveChange', function(e) {
 			console.log('liveChange: ', e.detail);
 			labelLiveChange.innerHTML = 'liveChange: ' + JSON.stringify(e.detail);
 		});

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

@@ -62,9 +62,9 @@
 			document.querySelector('#lbl').innerHTML = ++counter;
 		}
 
-		document.querySelector("#dp5").addEventListener("change", increaseCounter);
-		document.querySelector("#dp8").addEventListener("change", increaseCounter);
-		document.querySelector("#dp13").addEventListener("change", function(e) {
+		document.querySelector("#dp5").addEventListener("ui5-change", increaseCounter);
+		document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
+		document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
 			document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
 			document.querySelector('#lblTomorrowDate').innerHTML = e.target.value;
 		});

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

@@ -39,10 +39,10 @@
 	</ui5-dialog>
 
 	<script>
-		btnOpenDialog.addEventListener("press", function() {
+		btnOpenDialog.addEventListener("ui5-press", function() {
 			dialog.open();
 		});
-		btnCloseDialog.addEventListener("press", function() {
+		btnCloseDialog.addEventListener("ui5-press", function() {
 			dialog.close();
 		});
 	</script>