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

Author: MapTo0

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}}