Country selector fix & animation

src/pages/pageSignIn.ts

@@ -45,7 +45,7 @@ let onFirstMount = () => {
   var parent = selectCountryCode.parentElement;
 
   var wrapper = document.createElement('div');
-  wrapper.classList.add('select-wrapper', 'z-depth-3');
+  wrapper.classList.add('select-wrapper', 'z-depth-3', 'hide');
 
   var list = document.createElement('ul');
   wrapper.appendChild(list);
@@ -59,9 +59,9 @@ let onFirstMount = () => {
     pageSignQR.mount();
   });
 
-  selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) {
-    /* this.removeAttribute('readonly'); */
-    if(!initedSelect) {
+  let initSelect = () => {
+    initSelect = null;
+
     countries.forEach((c) => {
       initedSelect = true;
 
@@ -114,16 +114,35 @@ let onFirstMount = () => {
       setTimeout(() => telEl.focus(), 0);
       //console.log('clicked', e, countryName, phoneCode);
     });
+
+    parent.appendChild(wrapper);
+  };
+  
+  initSelect();
+
+  let hideTimeout: number;
+
+  selectCountryCode.addEventListener('focus', function(this: typeof selectCountryCode, e) {
+    if(initSelect) {
+      initSelect();
     } else {
       countries.forEach((c) => {
         c.li.forEach(li => li.style.display = '');
       });
     }
 
-    parent.appendChild(wrapper);
-  }/* , {once: true} */);
+    clearTimeout(hideTimeout);
+
+    wrapper.classList.remove('hide');
+    void wrapper.offsetWidth; // reflow
+    wrapper.classList.add('active');
+  });
   selectCountryCode.addEventListener('blur', function(this: typeof selectCountryCode, e) {
-    parent.removeChild(wrapper);
+    wrapper.classList.remove('active');
+    hideTimeout = setTimeout(() => {
+      wrapper.classList.add('hide');
+    }, 200);
+    
     e.cancelBubble = true;
   }, {capture: true});
 

src/scss/style.scss

@@ -1033,6 +1033,15 @@ avatar-element {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
+  transition: opacity .2s ease-out, transform .2s ease-out;
+  transform: scale(.95);
+  transform-origin: top center;
+  opacity: 0;
+
+  &.active {
+    transform: scale(1);
+    opacity: 1;
+  }
   
   ul {
     margin: .5rem 0;