fix(input): fix listening value property changes (#460)

Trendyol · Mar 9, 2023 · ee3a830 · ee3a830
1 parent d7d8278
commit ee3a830
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/src/components/input/bl-input.ts b/src/components/input/bl-input.ts
@@ -1,4 +1,4 @@
-import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';
+import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
@@ -178,7 +178,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
 
   @state() private passwordInput = false;
 
-  private textVisiblityToggle() {
+  private textVisibilityToggle() {
     this.passwordVisible = !this.passwordVisible;
   }
 
@@ -191,22 +191,18 @@ export default class BlInput extends FormControlMixin(LitElement) {
     return this.checkValidity();
   }
 
-  valueChangedCallback(value: string): void {
-    this.value = value;
-  }
-
   private inputHandler(event: Event) {
     const value = (event.target as HTMLInputElement).value;
 
-    this.setValue(value);
+    this.value = value;
     this.onInput(value);
   }
 
   private changeHandler(event: Event) {
     const value = (event.target as HTMLInputElement).value;
 
     this.dirty = true;
-    this.setValue(value);
+    this.value = value;
     this.onChange(value);
   }
 
@@ -215,6 +211,16 @@ export default class BlInput extends FormControlMixin(LitElement) {
     this.setValue(this.value);
   }
 
+  protected async updated(changedProperties: PropertyValues) {
+    if (changedProperties.has('value')) {
+      this.setValue(this.value);
+
+      await this.validationComplete;
+
+      this.requestUpdate();
+    }
+  }
+
   render(): TemplateResult {
     const invalidMessage = !this.checkValidity()
       ? html`<p id="errorMessage" aria-live="polite" class="invalid-text">
@@ -238,7 +244,7 @@ export default class BlInput extends FormControlMixin(LitElement) {
             'password-visible': this.passwordVisible,
           })}"
           aria-label="Toggle password reveal"
-          @bl-click="${this.textVisiblityToggle}"
+          @bl-click="${this.textVisibilityToggle}"
         >
           <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
           <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>

diff --git a/src/components/pagination/bl-pagination.test.ts b/src/components/pagination/bl-pagination.test.ts
@@ -1,7 +1,8 @@
-import { assert, expect, fixture, oneEvent, html } from '@open-wc/testing';
+import { assert, expect, fixture, html, oneEvent } from '@open-wc/testing';
 import BlPagination from './bl-pagination';
 
 import type typeOfBlPagination from './bl-pagination';
+import type BlInput from '../input/bl-input';
 
 describe('bl-pagination', () => {
   it('is defined', () => {
@@ -182,7 +183,7 @@ describe('bl-pagination', () => {
       );
 
       const jumper = el.shadowRoot?.querySelector('bl-input');
-      expect(jumper?.value).to.equal('3');
+      expect(jumper?.value).to.equal(3);
     });
   });
 
@@ -215,17 +216,20 @@ describe('bl-pagination', () => {
 
     it('should fire a bl-change event when jumper is changed', async () => {
       const el = await fixture<typeOfBlPagination>(paginationEl);
-      const jumper = el.shadowRoot?.querySelector('bl-input')?.shadowRoot?.querySelector('input');
+      const jumper = el.shadowRoot?.querySelector<BlInput>('bl-input');
 
       if (jumper) {
         jumper.value = '5';
       }
 
-      setTimeout(() => jumper?.dispatchEvent(new Event('change')));
+      setTimeout(() => {
+        jumper?.dispatchEvent(new Event('bl-change', { bubbles: true }));
+      });
+
       const ev = await oneEvent(el, 'bl-change');
 
       expect(ev).to.exist;
-      expect(ev.detail).to.be.equal('5');
+      expect(ev.detail.selectedPage).to.be.equal(5);
     });
 
     it('should set the page to the last page if user enters a bigger number than the last page', async () => {

diff --git a/src/components/pagination/bl-pagination.ts b/src/components/pagination/bl-pagination.ts
@@ -117,14 +117,6 @@ export default class BlPagination extends LitElement {
     ) {
       this._paginate();
     }
-
-    if (changedProperties.get('currentPage') || changedProperties.get('itemsPerPage')) {
-      this.onChange({
-        selectedPage: this.currentPage,
-        prevPage: changedProperties.get('currentPage'),
-        itemsPerPage: this.itemsPerPage,
-      });
-    }
   }
 
   private _paginate() {
@@ -155,33 +147,42 @@ export default class BlPagination extends LitElement {
     this.pages.push(pageListLength);
   }
 
-  private _changePage(page: number): void {
-    this.currentPage = page;
+  private _changePage(selectedPage: number): void {
+    const prevPage = this.currentPage;
+
+    this.currentPage = selectedPage;
+
+    this.onChange({
+      selectedPage,
+      prevPage,
+      itemsPerPage: this.itemsPerPage,
+    });
   }
 
   private _pageBack(): void {
     if (this.currentPage === 1) return;
-    this.currentPage--;
+    this._changePage(this.currentPage - 1);
   }
 
   private _pageForward(): void {
     if (this.currentPage === this._getLastPage()) return;
-    this.currentPage++;
+    this._changePage(this.currentPage + 1);
   }
 
   private _getLastPage(): number {
     return +this.pages[this.pages.length - 1];
   }
 
   private _inputHandler(event: CustomEvent) {
+    event.stopPropagation();
     const inputValue = +(event.target as HTMLInputElement).value;
     const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;
     this._changePage(newPage);
   }
 
   private _selectHandler(event: CustomEvent) {
     this.itemsPerPage = +event?.detail[0]?.value || 100;
-    this.currentPage = 1;
+    this._changePage(1);
   }
 
   private _renderSinglePage(page: number | string) {
@@ -253,7 +254,7 @@ export default class BlPagination extends LitElement {
     const jumperEl = this.hasJumper
       ? html` <div class="jumper">
           <label>${this.jumperLabel}</label>
-          <bl-input value="${this.currentPage}" @bl-change="${this._inputHandler}"></bl-input>
+          <bl-input .value="${this.currentPage}" @bl-change="${this._inputHandler}"></bl-input>
         </div>`
       : null;
 

diff --git a/src/components/textarea/bl-textarea.ts b/src/components/textarea/bl-textarea.ts
@@ -146,15 +146,15 @@ export default class BlTextarea extends FormControlMixin(LitElement) {
     this.autoResize();
 
     const value = (event.target as HTMLTextAreaElement).value;
-    this.setValue(value);
+    this.value = value;
     this.onInput(value);
   }
 
   private changeHandler(event: Event) {
     const value = (event.target as HTMLTextAreaElement).value;
 
     this.dirty = true;
-    this.setValue(value);
+    this.value = value;
     this.onChange(value);
   }
 
@@ -163,10 +163,18 @@ export default class BlTextarea extends FormControlMixin(LitElement) {
     this.autoResize();
   }
 
-  protected updated(changedProperties: PropertyValues) {
+  protected async updated(changedProperties: PropertyValues) {
     if (changedProperties.has('rows')) {
       this.autoResize();
     }
+
+    if (changedProperties.has('value')) {
+      this.setValue(this.value);
+
+      await this.validationComplete;
+
+      this.requestUpdate();
+    }
   }
 
   reportValidity() {