fix(core): property coerce for all packages

Signed-off-by: Cory Rylan <splintercode.cb@gmail.com>
vmware-clarity · Mar 8, 2022 · 81a6ba5 · 81a6ba5
1 parent 3a8e441
commit 81a6ba5
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 33 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
diff --git a/packages/core/src/internal/decorators/property.ts b/packages/core/src/internal/decorators/property.ts
@@ -10,6 +10,7 @@ import { camelCaseToKebabCase, kebabCaseToPascalCase, capitalizeFirstLetter } fr
 import { LogService } from '../services/log.service.js';
 import { getAngularVersion, getReactVersion, getVueVersion } from '../utils/framework.js';
 import { isNilOrEmpty } from '../utils/identity.js';
+import { coerceBooleanProperty } from '../utils/dom.js';
 
 export interface CustomPropertyConfig {
   type: unknown;
@@ -49,7 +50,7 @@ export function getDefaultOptions(propertyKey: string, options?: PropertyConfig)
           // Mimic standard HTML boolean attributes + support "false" attribute values
           // https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#boolean-attributes
           toAttribute: (value: string) => (value ? '' : null),
-          fromAttribute: (value: string) => value !== 'false' && value !== null,
+          fromAttribute: (value: string) => coerceBooleanProperty(value),
         },
         ...options,
       };

diff --git a/packages/core/src/internal/utils/dom.spec.ts b/packages/core/src/internal/utils/dom.spec.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -24,6 +24,7 @@ import {
   spanWrapper,
   isFocusable,
   queryChildFromLightOrShadowDom,
+  coerceBooleanProperty,
 } from './dom.js';
 
 /** @element test-dom-spec-element */
@@ -592,4 +593,16 @@ describe('Functional Helper: ', () => {
       removeTestElement(nonShadyHost);
     });
   });
+
+  describe('coerceBooleanProperty():', () => {
+    it('should coerse a value to a boolean', () => {
+      expect(coerceBooleanProperty(null)).toBe(false);
+      expect(coerceBooleanProperty(undefined)).toBe(false);
+      expect(coerceBooleanProperty(false)).toBe(false);
+      expect(coerceBooleanProperty(true)).toBe(true);
+      expect(coerceBooleanProperty('false')).toBe(false);
+      expect(coerceBooleanProperty('true')).toBe(true);
+      expect(coerceBooleanProperty('')).toBe(true);
+    });
+  });
 });
diff --git a/packages/core/src/internal/utils/dom.ts b/packages/core/src/internal/utils/dom.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2016-2021 VMware, Inc. All Rights Reserved.
+ * Copyright (c) 2016-2022 VMware, Inc. All Rights Reserved.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -166,3 +166,10 @@ export function queryChildFromLightOrShadowDom(hostEl: Element, selector?: strin
 
   return hostEl.querySelector(selector) || hostEl?.shadowRoot?.querySelector(selector) || null;
 }
+
+export type BooleanProperty = string | boolean | null | undefined;
+
+/** Coerces attribute/property value to a boolean */
+export function coerceBooleanProperty(value: any): boolean {
+  return value !== null && value !== undefined && `${value}` !== 'false';
+}