Refactor #500 - For Password

src/components/password/Password.vue

@@ -1,9 +1,10 @@
 <template>
-    <input type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" :value="modelValue" 
+    <input ref="input" type="password" :class="['p-inputtext p-component', {'p-filled': filled}]" :value="modelValue"
         @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" />
 </template>
 
 <script>
+import ConnectedOverlayScrollHandler from '../utils/ConnectedOverlayScrollHandler';
 import DomHandler from '../utils/DomHandler';
 
 export default {
@@ -43,10 +44,15 @@ export default {
     info: null,
     mediumCheckRegExp: null,
     strongCheckRegExp: null,
+    scrollHandler: null,
     mounted() {
         this.mediumCheckRegExp = new RegExp(this.mediumRegex);
         this.strongCheckRegExp = new RegExp(this.strongRegex);
     },
+    beforeUnmount() {
+        this.unbindScrollListener();
+        this.scrollHandler = null;
+    },
     methods: {
         testStrength(str) {
             let level = 0;
@@ -74,10 +80,10 @@ export default {
             this.panel.appendChild(this.info);
             document.body.appendChild(this.panel);
         },
-         onInput(event)  {
-             this.$emit('update:modelValue', event.target.value)
+        onInput(event)  {
+            this.$emit('update:modelValue', event.target.value)
         },
-        onFocus() {
+        showOverlay() {
             if (this.feedback) {
                 if (!this.panel) {
                     this.createPanel();
@@ -88,14 +94,16 @@ export default {
                 setTimeout(() => {
                     DomHandler.addClass(this.panel, 'p-connected-overlay-visible');
                     DomHandler.removeClass(this.panel, 'p-connected-overlay-hidden');
+                    this.bindScrollListener();
                 }, 1);
                 DomHandler.absolutePosition(this.panel, this.$el);
             }
         },
-        onBlur() {
+        hideOverlay() {
             if (this.panel) {
                 DomHandler.addClass(this.panel, 'p-connected-overlay-hidden');
                 DomHandler.removeClass(this.panel, 'p-connected-overlay-visible');
+                 this.unbindScrollListener();
 
                 setTimeout(() => {
                     this.panel.style.display = 'none';
@@ -103,6 +111,12 @@ export default {
                 }, 150);
             }
         },
+        onFocus() {
+            this.showOverlay();
+        },
+        onBlur() {
+            this.hideOverlay();
+        },
         onKeyUp(event) {
             if (this.panel) {
                 let value = event.target.value;
@@ -133,6 +147,27 @@ export default {
 
                 this.meter.style.backgroundPosition = meterPos;
                 this.info.textContent = label;
+
+                if (!DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
+                    this.showOverlay();
+                }
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                const { id } = this.$attrs;
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.input, id, () => {
+                    if (DomHandler.hasClass(this.panel, 'p-connected-overlay-visible')) {
+                        this.hideOverlay();
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
             }
         }
     },
@@ -142,4 +177,4 @@ export default {
         }
     }
 }
-</script>
+</script>