updates

src/widgets/cancelable/Cancelable.js

@@ -8,11 +8,12 @@ export class Cancelable {
 	*/
 	constructor(target, events) {
 
-        let that = this;
-
 		this.target = target;
+		this.events = events || {};
 
-        events = events || {};
+		if (target.dxData('cancelable')) {
+			return;
+		}
 
 		target.dxData('cancelable', this);
 
@@ -22,36 +23,39 @@ export class Cancelable {
 
 		if (elType == 'select' || (elType == 'input' && target.type == 'text')) {
 			
-            let val = this.target.dxVal();
+			const val = this.target.dxVal();
 
-            let emptyVal = '';
+			this.emptyVal = '';
 
 			if (elType == 'select' && target.dxFind('option[value="0"]')) {
-                emptyVal = '0';
+				this.emptyVal = '0';
 			}
 
-            this.iconHandler.classList.toggle('hide', val == emptyVal);
+			this.iconHandler.classList.toggle('hide', val == this.emptyVal);
 			
 			target.after(this.iconHandler);
 
-            target.dxOn(elType == 'input' ? 'input.cancelable changed.cancelable' : 'change.cancelable', function() {
-                that.iconHandler.classList.toggle('hide', this.dxVal() == emptyVal);
-            });
+			target.dxOn(elType == 'input' ? 'input.cancelable changed.cancelable' : 'change.cancelable', (_, t) => this.iconHandler.classList.toggle('hide', t.dxVal() == this.emptyVal));
 
-            this.iconHandler.dxOn('click', function() {
-
-                target.dxVal(emptyVal);
-
-                if ('value' in that.target.dataset) {
-                    that.target.dataset.value = '';
+			this.iconHandler.dxOn('click', _ => this.clear());
+		}
 	}
 
-                that.iconHandler.classList.add('hide');
+	/**
+	* Cancelble, Clear Value
+	*/
+	clear() {
 
-                that.target.dxTrigger('clear');
-                Ut.trigger(events.onClear, that);
-            });
+		this.target.value = this.emptyVal;
+
+		if ('value' in this.target.dataset) {
+			this.target.dataset.value = '';
 		}
+
+		this.iconHandler.classList.add('hide');
+
+		this.target.dxTrigger('clear');
+		Ut.trigger(this.events.onClear, this);
 	}
 
 	/**
@@ -63,7 +67,5 @@ export class Cancelable {
 		this.target.dxRemoveData('cancelable');
 
 		this.iconHandler.remove();
-        
-        return this.target;
 	}
 }