Add support for @outside global event filter

[lb-]

• When using @outside, it will behave the same as @document but only trigger the action if the event was triggered from outside the controlled element.
• Closes Feature request - Action option or global handling of 'outside' events #656

[lb-]

Important: This has been built to consider the Controlled element as what should be the boundary, not sure on the best way to go about this. We could change this to be the bounds of the element that has the data-action to be more flexible.

For example, these will both behave the same, only clicks that are 'fully outside' the controlled element will call a#something.

<main>
  <div id="outer" data-controller="a" data-action="click@outside->a#something">
    <button type="button" id="inner-button">outer<button>
    <div id="inner" data-action="click@outside->a#something">
      <button type="button" id="inner-button">inner</button>
    </div>
  </div>
  <button type="button">fully outside</button>
</main>

This may not be intuitive, so happy to adjust the PR so that it works based on the contains being compared against the element with the data-action.

[adrienpoly]

This may not be intuitive, so happy to adjust the PR so that it works based on the contains being compared against the element with the data-action.

That would feel more natural to me having the outside being compared to the element with the data action and not the controller by itself.

[lb-]

@adrienpoly yeah, I had a think about this and agree it would be pretty confusing, I have now changed the behaviour and updated unit tests.

When you set the data-action, that will be the 'contains' element, irrespective of the controlled element.

[lb-]

Not sure why it's failing, I don't think it's related to this PR.

Safari 14.1 (Mac OS 10.15.7) EventOptionsTests custom option FAILED
	Expected: 2
	Actual: 1
	
	step
	fulfilled
	promiseReactionJob@[native code]
	
	Expected: {
	  "eventType": "toggle",
	  "name": "log"
	}
	Actual: {
	  "eventType": undefined,
	  "name": undefined
	}
	
	
	step
	fulfilled
	promiseReactionJob@[native code]
	

[lb-]

Rebased

[lb-]

Rebased

[tonysm]

Nice work. I'd love to see this being merged! I was about to attempt implementing this after adding the same closeWhenClickedOutside action to different controllers.

[lb-]

Just rebased

[n-studio]

This feature is absolutely needed. I use @click.outside all the time when using Alpine.js.
When I switched to Stimulus it was the first thing I tried to do.

[setineos]

This feature is absolutely needed. I use @click.outside all the time when using Alpine.js. When I switched to Stimulus it was the first thing I tried to do.

Exactly