From dd7e1416b4df54bf71b719d4654db88769dc0994 Mon Sep 17 00:00:00 2001
From: undergroundwires <undergroundwires@users.noreply.github.com>
Date: Sat, 18 Jul 2020 23:56:53 +0100
Subject: [PATCH] do not collapse card when on "Search" and "Select"

---
 src/presentation/Scripts/Cards/CardList.vue     | 10 +++++++---
 .../Scripts/Cards/NonCollapsingDirective.ts     | 17 +++++++++++++++++
 .../Scripts/Selector/SelectableOption.vue       |  6 +++++-
 src/presentation/TheSearchBar.vue               | 11 ++++++++---
 4 files changed, 37 insertions(+), 7 deletions(-)
 create mode 100644 src/presentation/Scripts/Cards/NonCollapsingDirective.ts

diff --git a/src/presentation/Scripts/Cards/CardList.vue b/src/presentation/Scripts/Cards/CardList.vue
index 5a596c51..714c3da4 100644
--- a/src/presentation/Scripts/Cards/CardList.vue
+++ b/src/presentation/Scripts/Cards/CardList.vue
@@ -20,6 +20,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import CardListItem from './CardListItem.vue';
 import { StatefulVue } from '@/presentation/StatefulVue';
 import { ICategory } from '@/domain/ICategory';
+import { hasDirective } from './NonCollapsingDirective';
 
 @Component({
   components: {
@@ -33,7 +34,10 @@ export default class CardList extends StatefulVue {
   public async mounted() {
     const state = await this.getCurrentStateAsync();
     this.setCategories(state.app.actions);
-    this.onOutsideOfActiveCardClicked(() => {
+    this.onOutsideOfActiveCardClicked((element) => {
+      if (hasDirective(element)) {
+        return;
+      }
       this.activeCategoryId = null;
     });
   }
@@ -46,14 +50,14 @@ export default class CardList extends StatefulVue {
     this.categoryIds = categories.map((category) => category.id);
   }
 
-  private onOutsideOfActiveCardClicked(callback) {
+  private onOutsideOfActiveCardClicked(callback: (clickedElement: Element) => void) {
     const outsideClickListener = (event) => {
       if (!this.activeCategoryId) {
         return;
       }
       const element = document.querySelector(`[data-category="${this.activeCategoryId}"]`);
       if (element && !element.contains(event.target)) {
-        callback();
+          callback(event.target);
       }
     };
     document.addEventListener('click', outsideClickListener);
diff --git a/src/presentation/Scripts/Cards/NonCollapsingDirective.ts b/src/presentation/Scripts/Cards/NonCollapsingDirective.ts
new file mode 100644
index 00000000..2ac6ab2c
--- /dev/null
+++ b/src/presentation/Scripts/Cards/NonCollapsingDirective.ts
@@ -0,0 +1,17 @@
+import { DirectiveOptions } from 'vue';
+
+const attributeName = 'data-interactionDoesNotCollapse';
+
+export function hasDirective(el: Element): boolean {
+    if (el.hasAttribute(attributeName)) {
+        return true;
+    }
+    const parent = el.closest(`[${attributeName}]`);
+    return !!parent;
+}
+
+export const NonCollapsing: DirectiveOptions = {
+    inserted(el: HTMLElement) {
+        el.setAttribute(attributeName, '');
+    },
+};
diff --git a/src/presentation/Scripts/Selector/SelectableOption.vue b/src/presentation/Scripts/Selector/SelectableOption.vue
index 327b7b5a..56e60e83 100644
--- a/src/presentation/Scripts/Selector/SelectableOption.vue
+++ b/src/presentation/Scripts/Selector/SelectableOption.vue
@@ -1,14 +1,18 @@
 <template>
     <span
         v-bind:class="{ 'disabled': enabled, 'enabled': !enabled}"
+        v-non-collapsing
         @click="onClicked()">{{label}}</span>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
 import { StatefulVue } from '@/presentation/StatefulVue';
+import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
 
-@Component
+@Component({
+    directives: { NonCollapsing },
+})
 export default class SelectableOption extends StatefulVue {
   @Prop() public enabled: boolean;
   @Prop() public label: string;
diff --git a/src/presentation/TheSearchBar.vue b/src/presentation/TheSearchBar.vue
index d5048fc7..42a115ea 100644
--- a/src/presentation/TheSearchBar.vue
+++ b/src/presentation/TheSearchBar.vue
@@ -1,6 +1,7 @@
 <template>
-  <div class="search">
-      <input type="search" class="searchTerm" :placeholder="searchPlaceHolder"
+  <div class="search" v-non-collapsing>
+      <input type="search" class="searchTerm"
+        :placeholder="searchPlaceHolder"
         @input="updateFilterAsync($event.target.value)" >
       <div class="iconWrapper">
           <font-awesome-icon :icon="['fas', 'search']" />
@@ -11,8 +12,12 @@
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
 import { StatefulVue } from './StatefulVue';
+import { NonCollapsing } from '@/presentation/Scripts/Cards/NonCollapsingDirective';
 
-@Component
+@Component( {
+    directives: { NonCollapsing },
+  },
+)
 export default class TheSearchBar extends StatefulVue {
   public searchPlaceHolder = 'Search';