feature: scroll to top when searching

Author: gamalielhere

CHANGELOG.md

@@ -1,3 +1,7 @@
+### 1.4.4
+
+- scroll mew select to top when searching [#341](https://github.com/MyEtherWallet/mew-components/pull/341)
+
 ### 1.4.3-hotfix.2
 
 - fix menu popup overflow [#340](https://github.com/MyEtherWallet/mew-components/pull/340)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@myetherwallet/mew-components",
-  "version": "1.4.3-hotfix.2",
+  "version": "1.4.4",
   "description": "MEW Components",
   "main": "dist/mew-components.umd.js",
   "module": "dist/mew-components.esm.js",

package.json

@@ -26,7 +26,7 @@
           :src="btnIcon"
           alt="Icon"
           :class="btnTitle ? 'mr-2' : ''"
-        />
+        >
         <span :style="btnTitleStyle">{{ btnTitle }}</span>
       </v-btn>
 
@@ -77,27 +77,27 @@ export default {
     },
     color: {
       type: String,
-      default: "white",
+      default: 'white',
     },
     btnTitle: {
       type: String,
-      default: "",
+      default: '',
     },
     btnSize: {
       type: String,
-      default: "large",
+      default: 'large',
     },
     btnFontSize: {
       type: String,
-      default: "14px",
+      default: '14px',
     },
     btnIcon: {
       type: String,
-      default: "",
+      default: '',
     },
     btnIconSize: {
       type: String,
-      default: "30px",
+      default: '30px',
     },
     left: {
       type: Boolean,
@@ -158,12 +158,12 @@ export default {
     toggleMenu() {
       this.show = !this.show;
       if (this.show) {
-        window.addEventListener("click", this.detactOutsideClick);
+        window.addEventListener('click', this.detactOutsideClick);
       } else {
-        window.removeEventListener("click", this.detactOutsideClick);
+        window.removeEventListener('click', this.detactOutsideClick);
       }
 
-      this.$emit("input", this.show);
+      this.$emit('input', this.show);
     },
     // =============================================================================
     // Whenever outside of menu content window is clicked, close the menu
@@ -181,7 +181,7 @@ export default {
         )
       ) {
         this.show = false;
-        window.removeEventListener("click", this.detactOutsideClick);
+        window.removeEventListener('click', this.detactOutsideClick);
       }
     },
   },

src/components/MewMenuPopup/MewMenuPopup.vue

@@ -18,7 +18,12 @@
         class="mobile-title-block pa-3 d-flex align-center justify-space-between full-width"
       >
         <div style="min-width: 36px">
-          <v-btn v-if="back" icon color="textBlack2" @click="back">
+          <v-btn
+            v-if="back"
+            icon
+            color="textBlack2"
+            @click="back"
+          >
             <v-icon size="24">
               mdi-arrow-left
             </v-icon>
@@ -31,8 +36,16 @@
           {{ title }}
         </h3>
         <div style="min-width: 36px">
-          <v-btn v-if="close" icon color="textBlack2" @click="close">
-            <v-icon size="24" color="textBlack2">
+          <v-btn
+            v-if="close"
+            icon
+            color="textBlack2"
+            @click="close"
+          >
+            <v-icon
+              size="24"
+              color="textBlack2"
+            >
               mdi-close
             </v-icon>
           </v-btn>
@@ -78,11 +91,17 @@
         ]"
         @click="close"
       >
-        <v-icon size="24" color="textBlack2">
+        <v-icon
+          size="24"
+          color="textBlack2"
+        >
           mdi-close
         </v-icon>
       </v-btn>
-      <v-container :class="['ma-0 pa-0', isMobile ? 'full-height' : '']" fluid>
+      <v-container
+        :class="['ma-0 pa-0', isMobile ? 'full-height' : '']"
+        fluid
+      >
         <!-- ===================================================================================== -->
         <!-- White sheet (displays on the overlay - size is based on the contentSize prop) -->
         <!-- ===================================================================================== -->
@@ -106,8 +125,8 @@
                   isMobile
                     ? 'mew-heading-2 ml-3'
                     : isMobile && !back
-                    ? 'mew-heading-2 ml-4'
-                    : 'mew-subtitle',
+                      ? 'mew-heading-2 ml-4'
+                      : 'mew-subtitle',
                 ]"
               >
                 {{ title }}
@@ -131,7 +150,10 @@
         <!-- ===================================================================================== -->
         <!-- Footer -->
         <!-- ===================================================================================== -->
-        <v-row justify="center" class="ma-0 py-8 textMedium--text">
+        <v-row
+          justify="center"
+          class="ma-0 py-8 textMedium--text"
+        >
           {{ footer.text }}
           <a
             v-if="footer && footer.linkTitle && footer.link"
@@ -150,14 +172,14 @@
 
 <script>
 const sizes = {
-  small: "small",
-  medium: "medium",
-  large: "large",
-  xlarge: "xlarge",
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+  xlarge: 'xlarge',
 };
 
 export default {
-  name: "MewOverlay",
+  name: 'MewOverlay',
   props: {
     /**
      * Displays on the outside bottom of the white sheet.
@@ -184,7 +206,7 @@ export default {
      */
     title: {
       type: String,
-      default: "",
+      default: '',
     },
     /**
      * Function that gets triggered
@@ -212,7 +234,7 @@ export default {
      */
     contentSize: {
       type: String,
-      default: "small",
+      default: 'small',
     },
   },
   data() {
@@ -228,18 +250,18 @@ export default {
       if (this.contentSize) {
         switch (this.contentSize.toLowerCase()) {
           case sizes.small:
-            return "384px";
+            return '384px';
           case sizes.medium:
-            return "504px";
+            return '504px';
           case sizes.large:
-            return "624px";
+            return '624px';
           case sizes.xlarge:
-            return "744px";
+            return '744px';
           default:
-            return "384px";
+            return '384px';
         }
       }
-      return "384px";
+      return '384px';
     },
   },
   watch: {
@@ -261,12 +283,12 @@ export default {
   methods: {
     // Remove html element's side bar to fix double sidebar bug
     removeHtmlScrollbar() {
-      const htmlElement = document.querySelector("html");
-      htmlElement.style.overflow = "hidden";
+      const htmlElement = document.querySelector('html');
+      htmlElement.style.overflow = 'hidden';
     },
     // Restore html element's side bar on exit
     restoreHtmlScrollbar() {
-      const htmlElement = document.querySelector("html");
+      const htmlElement = document.querySelector('html');
       htmlElement.style.overflow = null;
     },
   },