v3.0.0-alpha.3 createPopperElement focusout - Question

Hey! I have a question about https://github.com/atomiks/tippyjs/blob/v3/src/js/utils.js#L239 in regards to using Tippy more as a dropdown menu vs tooltip. I will make a CodePen soon… Basically, I have tippy displaying a “bootstrap” menu, and inside of that menu I have a search input with typeahead. Tippy is interactive with hideOnClick = false. Because the typeahead is 3rd party and doesn’t give me the option to append the list inside of the popper element, it is appended to the body. Each typeahead item has a tabindex and when I select an item, the Tippy is hidden. I was thinking that interactive and hideOnClick = false would prevent everything and anything from hiding… The issue is in the below code… the focusout… if I add the simple if statement for props.interactive it solves this case… is this by design or a bug? I am trying to think of any consequences this will have.

  popper.addEventListener('focusout', function (e) {
    if(props.interactive) {
      return;
    }
    if (e.relatedTarget && popper._tippy && !closestCallback(e.relatedTarget, function (el) {
      return el === popper;
    })) {
      popper._tippy.hide();
    }
  });

[atomiks]

See 3.0.0-beta.1.

The option is shouldPopperHideOnBlur (function) and it takes the focusout event an argument.

shouldPopperHideOnBlur: () => true

[davefmoore]

The issue I have is that the elements that are being add to the dom are from a third party typeahead in which I can’t append the typeahead to an element inside of the tippy. The below code is what I am currently using in which the e.relatedTarget._tippy is for “submenus” inside of parent menus so that the parent menu doesn’t close when a submenu item is clicked. The e.relatedTarget.closest('.dropdown-menu') is a quick fix as the typeahead being appended to the dom has a parent class of '.dropdown-menu'.

popper.addEventListener('focusout', function(e) {
  if (e.relatedTarget && (e.relatedTarget._tippy || e.relatedTarget.closest('.dropdown-menu')) {
    return;
  }
  if (e.relatedTarget && popper._tippy && !closestCallback(e.relatedTarget, function(el) {
    return el === popper;
  })) {
    popper._tippy.hide();
  }
});

If you could expose a way to hook into this logic in which you pass the event and I can return a boolean to continue before you code is executed that would solve this use case for anyone using tippy for more advanced reasons.