Fix detaching click event

src/components/chat/autocompleteHelper.ts

@@ -52,21 +52,19 @@ export default class AutocompleteHelper extends EventListenerBase<{
 
     this.attachNavigation();
 
-    this.controller && this.controller.addHelper(this);
+    this.controller?.addHelper(this);
   }
 
   public toggleListNavigation(enabled: boolean) {
     if(enabled) {
-      this.attach && this.attach();
+      this.attach?.();
     } else {
-      this.detach && this.detach();
+      this.detach?.();
     }
   }
 
   protected onVisible = () => {
-    if(this.detach) { // it can be so because 'visible' calls before animation's end
-      this.detach();
-    }
+    this.detach?.(); // it can be so because 'visible' calls before animation's end
 
     const list = this.list;
     const {attach, detach, resetTarget} = attachListNavigation({
@@ -144,9 +142,7 @@ export default class AutocompleteHelper extends EventListenerBase<{
         this.controller.hideOtherHelpers();
       }
 
-      if(this.detach) { // force detach here
-        this.detach();
-      }
+      this.detach?.(); // force detach here
     }
 
     const useRafs = this.controller || hide ? 0 : 2;

src/components/chat/bubbles.ts

@@ -44,7 +44,7 @@ import findUpTag from '../../helpers/dom/findUpTag';
 import {toast, toastNew} from '../toast';
 import {getMiddleware, Middleware} from '../../helpers/middleware';
 import cancelEvent from '../../helpers/dom/cancelEvent';
-import {attachClickEvent, detachClickEvent, simulateClickEvent} from '../../helpers/dom/clickEvent';
+import {attachClickEvent, simulateClickEvent} from '../../helpers/dom/clickEvent';
 import htmlToDocumentFragment from '../../helpers/dom/htmlToDocumentFragment';
 import reflowScrollableElement from '../../helpers/dom/reflowScrollableElement';
 import replaceContent from '../../helpers/dom/replaceContent';

src/components/poll.ts

@@ -16,7 +16,7 @@ import {fastRaf} from '../helpers/schedulers';
 import SetTransition from './singleTransition';
 import findUpClassName from '../helpers/dom/findUpClassName';
 import cancelEvent from '../helpers/dom/cancelEvent';
-import {attachClickEvent, detachClickEvent, simulateClickEvent} from '../helpers/dom/clickEvent';
+import {attachClickEvent, simulateClickEvent} from '../helpers/dom/clickEvent';
 import replaceContent from '../helpers/dom/replaceContent';
 import windowSize from '../helpers/windowSize';
 import {Message, MessageMedia, Poll, PollResults} from '../layer';
@@ -207,6 +207,8 @@ export default class PollElement extends HTMLElement {
   private sendVotePromise: Promise<void>;
   private sentVote = false;
 
+  private detachClickEvent: () => void;
+
   public static setMaxLength() {
     const width = windowSize.width <= 360 ? windowSize.width - 120 : mediaSizes.active.poll.width;
     this.MAX_LENGTH = width + tailLength + this.MAX_OFFSET + -13.7; // 13 - position left
@@ -446,7 +448,7 @@ export default class PollElement extends HTMLElement {
 
     if(canVote) {
       this.setVotersCount(results);
-      attachClickEvent(this, this.clickHandler);
+      this.detachClickEvent = attachClickEvent(this, this.clickHandler);
     }
   }
 
@@ -569,9 +571,10 @@ export default class PollElement extends HTMLElement {
       this.chosenIndexes = chosenIndexes.slice();
 
       if(this.isRetracted) {
-        attachClickEvent(this, this.clickHandler);
+        this.detachClickEvent = attachClickEvent(this, this.clickHandler);
       } else {
-        detachClickEvent(this, this.clickHandler);
+        this.detachClickEvent?.();
+        this.detachClickEvent = undefined;
       }
     }
 

src/helpers/dom/attachListNavigation.ts

@@ -6,7 +6,7 @@
 
 import fastSmoothScroll from '../fastSmoothScroll';
 import cancelEvent from './cancelEvent';
-import {attachClickEvent, detachClickEvent} from './clickEvent';
+import {attachClickEvent} from './clickEvent';
 import findUpAsChild from './findUpAsChild';
 import findUpClassName from './findUpClassName';
 
@@ -147,7 +147,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
     }
   };
 
-  let attached = false;
+  let attached = false, detachClickEvent: () => void;
   const attach = () => {
     if(attached) return;
     attached = true;
@@ -155,7 +155,7 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
     // input.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
     document.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
     list.addEventListener('mousemove', onMouseMove, {passive: true});
-    attachClickEvent(list, onClick);
+    detachClickEvent = attachClickEvent(list, onClick);
   };
 
   const detach = () => {
@@ -164,7 +164,8 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
     // input.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
     document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
     list.removeEventListener('mousemove', onMouseMove);
-    detachClickEvent(list, onClick);
+    detachClickEvent();
+    detachClickEvent = undefined;
   };
 
   const resetTarget = () => {

src/helpers/dom/clickEvent.ts

@@ -71,13 +71,13 @@ export function attachClickEvent(elem: HTMLElement | Window, callback: (e: /* To
   return () => remove(CLICK_EVENT_NAME, callback, options);
 }
 
-export function detachClickEvent(elem: HTMLElement | Window, callback: (e: /* TouchEvent |  */MouseEvent) => void, options?: AddEventListenerOptions) {
-  // if(CLICK_EVENT_NAME === 'touchend') {
-  //   elem.removeEventListener('touchstart', callback, options);
-  // } else {
-  elem.removeEventListener(CLICK_EVENT_NAME, callback as any, options);
-  // }
-}
+// export function detachClickEvent(elem: HTMLElement | Window, callback: (e: /* TouchEvent |  */MouseEvent) => void, options?: AddEventListenerOptions) {
+//   // if(CLICK_EVENT_NAME === 'touchend') {
+//   //   elem.removeEventListener('touchstart', callback, options);
+//   // } else {
+//   elem.removeEventListener(CLICK_EVENT_NAME, callback as any, options);
+//   // }
+// }
 
 export function simulateClickEvent(elem: HTMLElement) {
   simulateEvent(elem, CLICK_EVENT_NAME);

src/helpers/dropdownHover.ts

@@ -4,7 +4,7 @@
  * https://github.com/morethanwords/tweb/blob/master/LICENSE
  */
 
-import {attachClickEvent, detachClickEvent} from './dom/clickEvent';
+import {attachClickEvent} from './dom/clickEvent';
 import findUpAsChild from './dom/findUpAsChild';
 import EventListenerBase from './eventListenerBase';
 import ListenerSetter from './listenerSetter';
@@ -37,6 +37,7 @@ export default class DropdownHover extends EventListenerBase<{
   protected navigationItem: NavigationItem;
   protected ignoreOutClickClassName: string;
   protected timeouts: {[type in DropdownHoverTimeoutType]?: number};
+  protected detachClickEvent: () => void;
 
   constructor(options: {
     element: DropdownHover['element'],
@@ -87,7 +88,7 @@ export default class DropdownHover extends EventListenerBase<{
         if(ignore && !this.ignoreMouseOut.size) {
           this.ignoreButtons.add(button);
           setTimeout(() => {
-            attachClickEvent(window, this.onClickOut, {capture: true});
+            this.detachClickEvent = attachClickEvent(window, this.onClickOut, {capture: true});
           }, 0);
         }
 
@@ -214,7 +215,8 @@ export default class DropdownHover extends EventListenerBase<{
       this.element.classList.remove('active');
 
       appNavigationController.removeItem(this.navigationItem);
-      detachClickEvent(window, this.onClickOut, {capture: true});
+      this.detachClickEvent?.();
+      this.detachClickEvent = undefined;
 
       this.clearTimeout('toggle');
       this.setTimeout('done', () => {