False positive when a user highlights text inside the modal and drags cursor outside

[zelaznik]

Summary:

I tried add this modifier to a modal in our app. The modal is supposed to close if a user clicks outside the main content region. It's closing the modal when it shouldn't:

• Click inside the modal to highlight some text
• Drag the cursor slightly past the edge of the modal content
• Lift the mouse button

This behavior should not be considered an outside click. To check whether this behavior is intentional, try clicking your mouse anywhere on a webpage, dragging your cursor on top of an interactive element such as a button or a link, and then release the cursor. The browser does not behave as though you just clicked on that button.

Possible solution:

Before I knew that this library even existed, I built our own outside click handling for our modal and had to deal with this very problem. It involves adding mousedown and mouseover listeners for the target area, and also adding mousedown and mouseup listeners for the entire document. Those events update a state object to track whether the mouse was ever clicked down on the target area or dragged over the target area. If either of those answers is "Yes", it doesn't fire the callback.

Here's the code I implemented for a standalone modifier. I tried looking through your source code, but I haven't digested it well enough to feel confident that I could create a PR and not break any of your work.

import { modifier } from 'ember-modifier';

export default modifier(function onOutsideClick(element, [callback]) {
  const state = {
    global: { mouseIsDown: false },
    target: { mouseWasDown: false, mouseWasOver: false },
  };

  const listeners = {
    target: {
      mousedown() {
        state.target.mouseWasDown = true;
      },
      mouseover() {
        if (state.global.mouseIsDown) {
          state.target.mouseWasOver = true;
        }
      },
    },
    global: {
      mousedown() {
        state.global.mouseIsDown = true;
      },
      mouseup(e) {
        const { mouseWasDown, mouseWasOver } = state.target;

        state.global.mouseIsDown = false;
        state.target.mouseWasDown = false;
        state.target.mouseWasOver = false;

        if (!mouseWasDown && !mouseWasOver) {
          callback(e);
        }
      },
    },
  };

  for (const eventName in listeners.target) {
    element.addEventListener(eventName, listeners.target[eventName]);
  }

  for (const eventName in listeners.global) {
    document.addEventListener(eventName, listeners.global[eventName]);
  }

  return () => {
    for (const eventName in listeners.target) {
      element.removeEventListener(eventName, listeners.target[eventName]);
    }

    for (const eventName in listeners.global) {
      document.removeEventListener(eventName, listeners.global[eventName]);
    }
  };
});

[mamiller93]

@zelaznik I don't have that problem in our app. Have you tried wrapping the inner clickable menu area in a stop-propagation modifier?

Example:

<div>
    <button
      type="button"
      {{on "click" (set this "menuIsOpen" (not this.menuIsOpen))}}
      {{on-click-outside
        (set this "menuIsOpen" false)
        eventType="mousedown"
        exceptSelector=(concat "#" this.menuId " *")
      }}
    >
    </button>
    {{#if this.menuIsOpen}}
      <div
        id={{this.menuId}}
        {{on "click" (stop-propagation (set this "menuIsOpen" true))}}
      >
       [some clickable stuff here]
      </div>
    {{/if}}
  </div>

[zeppelin]

@zelaznik Sorry, got buried by other notifications.

Related: #49

Will check what could be done in the coming days!