stop click propagation added to the docs

tests/dummy/app/controllers/public-pages/docs/the-list.js

@@ -43,6 +43,12 @@ export default Controller.extend({
   actions: {
     refreshCollection() {
       this.set('promise', generatePromise());
+    },
+    stopPropagation(e) {
+      e.stopPropagation();
+    },
+    removeName(name) {
+      alert(`remove name: ${name}`);
     }
   }
 });

tests/dummy/app/templates/public-pages/docs/the-list.hbs

@@ -149,6 +149,16 @@
   This is because it deserves an entire chapter of its own.
 </p>
 
+<h3>Prevent click propagation inside the list</h3>
+
+<p>
+ The options inside the list are selected with mousedown, a good way to prevent the selection is intercepting onmouseup and calling stopPropagation on the element "e.stopPropagation()"
+</p>
+
+{{#code-example hbs="the-list-10.hbs" js="the-list-10-js.js" as |partialName|}}
+  {{partial partialName}}
+{{/code-example}}
+
 <div class="doc-page-nav">
   <a href="{{href-to 'public-pages.docs.the-trigger'}}" class="doc-page-nav-link-prev">&lt; The trigger</a>
   <a href="{{href-to 'public-pages.docs.the-search'}}" class="doc-page-nav-link-next">The search &gt;</a>

tests/dummy/app/templates/snippets/the-list-10-js.js

@@ -0,0 +1,13 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  names: ['Stefan', 'Miguel', 'Tomster', 'Pluto'],
+  actions: {
+    stopPropagation(e) {
+      e.stopPropagation();
+    },
+    removeName(name) {
+      alert(`remove name: ${name}`);
+    }
+  }
+});

tests/dummy/app/templates/snippets/the-list-10.hbs

@@ -0,0 +1,11 @@
+{{#power-select
+  options=names
+  renderInPlace=true
+  selected=name345
+  onchange=(action (mut name345))
+  as |name|
+}}
+  {{name}}
+  <a onmouseup={{action "stopPropagation"}} 
+    onclick={{action "removeName" name}}>x</a>
+{{/power-select}}