Adding click event listener to autocomplete tooltip info panel is not working

v6
#1

I am trying to add a click event listener to the custom autocomplete info dom element, but no click event seems to work in the info element. Is there something obvious that could be preventing this from happening?

        info: (completion: Completion) => {
              if (description) {
                const el = document.createElement('div');
                if (description) {
                  const descriptionEl = document.createElement('div');

                  if (item.type) {
                    const typeEl = document.createElement('div');
                    typeEl.innerHTML = `<span>${sanitizeHtml(
                      item.type
                    )}</span>`;
                    typeEl.addEventListener('click', (e) => {
                      e.preventDefault();
                      console.log('clicked');
                    });

                    descriptionEl.appendChild(typeEl);
                  }

                  el.appendChild(descriptionEl);
                }

                return el;
              }
            },
#2

Is it possible that what’s happening is that clicking on the tooltip moves the focus out of the editor, causing the completion interface to close?

#3

I thought the tooltip was within the editor DOM tree? Also in that case since I am clicking on the DOM element that has the click event, I would expect that event listener to be called first right? Unless the event is captured in an ancestor element?

#4

It’s not in the editable DOM tree, which is where focus is. Focus motion happens before click is fired. You might have more luck with the mousedown event.

#5

mousedown event worked! :slightly_smiling_face: Thanks