fix: fix timing to force .layout(), update tests

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>
motss · Apr 2, 2022 · 242ff1b · 242ff1b
1 parent a84c165
commit 242ff1b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/src/__tests__/date-picker-input/app-date-picker-input.test.ts b/src/__tests__/date-picker-input/app-date-picker-input.test.ts
@@ -12,6 +12,7 @@ import { appDatePickerName } from '../../date-picker/constants';
 import type { DialogClosedEventDetail } from '../../date-picker-dialog/typings';
 import type { AppDatePickerInput } from '../../date-picker-input/app-date-picker-input';
 import { appDatePickerInputName, appDatePickerInputType } from '../../date-picker-input/constants';
+import type { DatePickerInputProperties } from '../../date-picker-input/typings';
 import type { AppDatePickerInputSurface } from '../../date-picker-input-surface/app-date-picker-input-surface';
 import { appDatePickerInputSurfaceName } from '../../date-picker-input-surface/constants';
 import { iconClear } from '../../icons';
@@ -23,7 +24,6 @@ import { appYearGridName } from '../../year-grid/constants';
 import { eventOnce } from '../test-utils/event-once';
 import { messageFormatter } from '../test-utils/message-formatter';
 import { queryDeepActiveElement } from '../test-utils/query-deep-active-element';
-import type { DatePickerInputProperties } from '../../date-picker-input/typings';
 
 describe(appDatePickerInputName, () => {
   const elementSelectors = {
@@ -73,7 +73,6 @@ describe(appDatePickerInputName, () => {
             .label=${label}
             .max=${max}
             .min=${min}
-            .placeholder=${placeholder}
             .value=${testValue}
           ></app-date-picker-input>`
         );
@@ -95,7 +94,7 @@ describe(appDatePickerInputName, () => {
 
         expect(mdcFloatingLabel).text(label);
         expect(mdcTextFieldInput?.getAttribute('aria-labelledby')).equal('label');
-        expect(mdcTextFieldInput?.placeholder).equal(placeholder);
+        expect(mdcTextFieldInput?.placeholder).equal('');
         expect(mdcTextFieldIconTrailing).lightDom.equal(iconClear.strings.toString());
       }
     );
@@ -577,7 +576,7 @@ describe(appDatePickerInputName, () => {
   type CaseRenderAndTriggerNothing = keyof Pick<DatePickerInputProperties, 'disabled' | 'readOnly'>;
   const casesRenderAndTriggerNothing: CaseRenderAndTriggerNothing[] = [
     'disabled',
-    'readOnly'
+    'readOnly',
   ];
   casesRenderAndTriggerNothing.forEach((a) => {
     it(`renders correctly and does not trigger anything event handler when '${a}' is set to true`, async () => {

diff --git a/src/__tests__/test-utils/event-once.ts b/src/__tests__/test-utils/event-once.ts
@@ -40,7 +40,7 @@ export function eventOnce<
       node.removeEventListener(eventName as unknown as keyof HTMLElementEventMap, handler);
 
       resolve(resolvedEvent as ResolvedCustomEvent);
-    }
+    };
 
     node.addEventListener(eventName as unknown as keyof HTMLElementEventMap, handler);
 

diff --git a/src/date-picker-input/date-picker-input.ts b/src/date-picker-input/date-picker-input.ts
@@ -116,12 +116,9 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
     super.willUpdate(changedProperties);
 
     if (changedProperties.has('locale')) {
-      const newLocale = (
+      this.locale = (
         this.locale || DateTimeFormat().resolvedOptions().locale
       ) as string;
-
-      this.locale = newLocale;
-
       this.#valueFormatter = this.$toValueFormatter();
       this.#updateValues(this.value);
     }
@@ -133,10 +130,6 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
     if (changedProperties.has('disabled') || changedProperties.has('readOnly')) {
       this._disabled = this.disabled || this.readOnly;
     }
-
-    if (changedProperties.has('disabled') || changedProperties.has('outlined')) {
-      this.layout();
-    }
   }
 
   public override async updated(): Promise<void> {
@@ -145,6 +138,14 @@ export class DatePickerInput extends ElementMixin(DatePickerMixin(DatePickerMinM
 
       picker?.queryAll?.<AppIconButton>(appIconButtonName).forEach(n => n.layout());
     }
+
+    if (this.placeholder || this.label) {
+      /**
+       * NOTE(motss): This is a workaround to force the layout to update with any defined
+       * `placeholder` and/ or `label`.
+       */
+      this.layout();
+    }
   }
 
   public override render(): TemplateResult {