Change mousedown event on click in edit-text

Remove some outdated styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elsci-io/ui-essential",
-  "version": "1.0.58",
+  "version": "1.0.59",
   "description": "Material Design components created for products built by elsci.io",
   "main": "src/index.js",
   "type": "module",

src/EditText/EditText.js

@@ -78,7 +78,8 @@ export default class EditText extends HTMLElement {
 
     #addListeners() {
         this.#children.text.addEventListener("click", this.#showPopup.bind(this));
-        this.addEventListener('mousedown', this.#onClickOutsideOfInput.bind(this));
+        // Beware of "mousedown" because click event still could be triggered on the element below edit-text
+        this.addEventListener('click', this.#onClickOutsideOfInput.bind(this));
         this.#children.popup.addEventListener('keydown', this.#onKeydown.bind(this));
         this.#children.input.onInput(this.#onInput.bind(this));
         this.addEventListener("cancel", this.#onEscape.bind(this));
@@ -108,10 +109,10 @@ export default class EditText extends HTMLElement {
     }
 
     #onClickOutsideOfInput(event) {
-        if (event.target !== this.#children.popup)
-            return;
         event.preventDefault();
         event.stopPropagation();
+        if (event.target !== this.#children.popup)
+            return;
         if (this.#validateWithExternalValidators()) {
             this.#children.popup.close();
             this.#updateDisplayTextAndNotifyIfChanged();

src/EditText/EditText.scss

@@ -20,10 +20,6 @@ edit-text {
   margin: .5rem .5rem 1rem;
 }
 
-//.edit-text__popup text-input input{
-//  width: 11ch;
-//}
-
 .edit-text__popup .text-input__error {
   height: unset;
 }
@@ -34,7 +30,6 @@ edit-text {
 
 .edit-text__popup .text-input--with-right-icon .text-input__input {
   padding-right: 0;
-  //width: inherit;
 }
 
 edit-text .edit-text__text {