diff --git a/app/components/search/index.hbs b/app/components/search/index.hbs
index ad023c69e30ab6e40dc75b39f0b14edb1d51196b..3a28959ee9e06708cb809010babae8d29c1b8b15 100644
--- a/app/components/search/index.hbs
+++ b/app/components/search/index.hbs
@@ -1,4 +1,6 @@
-<form class="d-flex flex-column autocomplete-search">
+<form
+ class="d-flex flex-column autocomplete-search"
+ {{on-click-outside this.onClickOutside}}>
<div class="d-flex">
<div class="input-group">
<button class="btn btn-light border-0" type="button">
diff --git a/app/components/search/index.js b/app/components/search/index.js
index 7f8ae2391576df6bde7befa96701461c0bb66a6f..bd2e5fdf55ff015c8141e87df2b5d624d5083369 100644
--- a/app/components/search/index.js
+++ b/app/components/search/index.js
@@ -49,6 +49,11 @@ export default class SearchComponent extends Component {
}
}
+ @action
+ onClickOutside() {
+ this._reset();
+ }
+
_reset() {
this.query = '';
this.autocomplete_items = [];
diff --git a/app/modifiers/on-click-outside.js b/app/modifiers/on-click-outside.js
new file mode 100644
index 0000000000000000000000000000000000000000..2bacdbb5de306fa3d394be748de4395a90a343ce
--- /dev/null
+++ b/app/modifiers/on-click-outside.js
@@ -0,0 +1,54 @@
+import { action } from '@ember/object';
+import Modifier from 'ember-modifier';
+
+
+export default class OnClickOutsideModifier extends Modifier {
+ /*
+ Modifier which will trigger given handler if 'click' event occured
+ outside of the element.
+
+ Example:
+
+ <SomeComponent {{on-click-outside this.onClickOutside}} />
+
+ Whenever click event occurs outside <SomeComponent /> `this.onClickOutside`
+ will be invoked. Handler is invoked without any arguments.
+ */
+
+ on_click_user_handler = null;
+
+ _init() {
+ document.addEventListener('click', this.onClick);
+ }
+
+ _destroy() {
+ document.removeEventListener('click', this.onClick);
+ }
+
+ didReceiveArguments() {
+ this.on_click_user_handler = this.args.positional[0];
+ this._init();
+ }
+
+ willDestroy() {
+ this._destroy();
+ }
+
+ @action
+ onClick(event) {
+ let path;
+
+ // composedPath() method of the Event interface returns the event's path
+ // which is an array of the objects on which listeners will be invoked.
+ // https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath The
+ if (event.composedPath) {
+ path = event.composedPath();
+ }
+
+ if (path && !path.includes(this.element)) {
+ if (this.on_click_user_handler) {
+ this.on_click_user_handler();
+ }
+ }
+ }
+}
diff --git a/package-lock.json b/package-lock.json
index 8b9f7c0c9fdb5242d9f76e257511aad5f479b65e..a9e4ab5614a3b3c080744530fea01adadc1be2d5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1331,11 +1331,6 @@
"picocolors": "^1.0.0"
}
},
- "caniuse-lite": {
- "version": "1.0.30001299",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
- "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw=="
- },
"electron-to-chromium": {
"version": "1.4.44",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.44.tgz",
@@ -2521,11 +2516,6 @@
"picocolors": "^1.0.0"
}
},
- "caniuse-lite": {
- "version": "1.0.30001299",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
- "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw=="
- },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -4298,11 +4288,6 @@
"picocolors": "^1.0.0"
}
},
- "caniuse-lite": {
- "version": "1.0.30001299",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
- "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw=="
- },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -9971,9 +9956,9 @@
}
},
"caniuse-lite": {
- "version": "1.0.30001259",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001259.tgz",
- "integrity": "sha512-V7mQTFhjITxuk9zBpI6nYsiTXhcPe05l+364nZjK7MFK/E7ibvYBSAXr4YcA6oPR8j3ZLM/LN+lUqUVAQEUZFg=="
+ "version": "1.0.30001319",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz",
+ "integrity": "sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw=="
},
"capture-exit": {
"version": "2.0.0",
@@ -12032,11 +12017,6 @@
"picocolors": "^1.0.0"
}
},
- "caniuse-lite": {
- "version": "1.0.30001299",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
- "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw=="
- },
"ci-info": {
"version": "3.3.0",
"resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.3.0.tgz",
@@ -13395,11 +13375,6 @@
"picocolors": "^1.0.0"
}
},
- "caniuse-lite": {
- "version": "1.0.30001299",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001299.tgz",
- "integrity": "sha512-iujN4+x7QzqA2NCSrS5VUy+4gLmRd4xv6vbBBsmfVqTx8bLAD8097euLqQgKxSVLvxjSDcvF1T/i9ocgnUFexw=="
- },
"chalk": {
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
@@ -15070,7 +15045,6 @@
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/ember-keyboard/-/ember-keyboard-7.0.0.tgz",
"integrity": "sha512-NuFZqIU1SahX0dFWqBJ8rD30cQF92RbuVPwbHTYU0SJFhVltYen6G66b3u2PkshK/WpdGHDL8XS+hZvpsoP2DA==",
- "dev": true,
"requires": {
"ember-cli-babel": "^7.26.6",
"ember-cli-htmlbars": "^6.0.1",
@@ -15352,7 +15326,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/ember-modifier-manager-polyfill/-/ember-modifier-manager-polyfill-1.2.0.tgz",
"integrity": "sha512-bnaKF1LLKMkBNeDoetvIJ4vhwRPKIIumWr6dbVuW6W6p4QV8ZiO+GdF8J7mxDNlog9CeL9Z/7wam4YS86G8BYA==",
- "dev": true,
"requires": {
"ember-cli-babel": "^7.10.0",
"ember-cli-version-checker": "^2.1.2",
@@ -15363,7 +15336,6 @@
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/ember-cli-version-checker/-/ember-cli-version-checker-2.2.0.tgz",
"integrity": "sha512-G+KtYIVlSOWGcNaTFHk76xR4GdzDLzAS4uxZUKdASuFX0KJE43C6DaqL+y3VTpUFLI2FIkAS6HZ4I1YBi+S3hg==",
- "dev": true,
"requires": {
"resolve": "^1.3.3",
"semver": "^5.3.0"
@@ -15372,8 +15344,7 @@
"semver": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
- "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
- "dev": true
+ "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ=="
}
}
},
diff --git a/package.json b/package.json
index 251405ee6994be26e2f5baae3d57bd8c9f41be41..5a6e8690dfa08b962207db38cf08287a21f0a431 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
"ember-data": "^4.1.0",
"ember-export-application-global": "^2.0.1",
"ember-fetch": "^8.1.1",
+ "ember-keyboard": "^7.0.0",
"ember-load-initializers": "^2.1.2",
"ember-modifier": "^3.0.0",
"ember-page-title": "^7.0.0",
@@ -57,7 +58,6 @@
"ember-simple-auth": "^4.1.1",
"ember-source": "^4.1.0",
"ember-template-lint": "^3.16.0",
- "ember-keyboard": "^7.0.0",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-ember": "^10.5.8",