feat(controller): add stringConverter for empty reflecting attributes

PiperOrigin-RevId: 464124340

controller/string-converter.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export const stringConverter = {
+  fromAttribute(value: string|null): string {
+    return value ?? '';
+  },
+  toAttribute(value: string): string|null {
+    return value || null;
+  }
+};

controller/string-converter_test.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import 'jasmine';
+
+import {stringConverter} from './string-converter';
+
+describe('stringConverter', () => {
+  describe('.fromAttribute', () => {
+    it('should return an empty string if string is empty or null', () => {
+      expect(stringConverter.fromAttribute('')).toBe('');
+      expect(stringConverter.fromAttribute(null)).toBe('');
+    });
+
+    it('should return value of string if not empty', () => {
+      expect(stringConverter.fromAttribute('foo')).toBe('foo');
+    });
+  });
+
+  describe('.toAttribute', () => {
+    it('should return null if string is empty', () => {
+      expect(stringConverter.toAttribute('')).toBeNull();
+    });
+
+    it('should return value of string if not empty', () => {
+      expect(stringConverter.toAttribute('foo')).toBe('foo');
+    });
+  });
+});

textfield/lib/text-field.ts

@@ -8,6 +8,7 @@
 
 import {redispatchEvent} from '@material/web/controller/events';
 import {FormController, getFormValue} from '@material/web/controller/form-controller';
+import {stringConverter} from '@material/web/controller/string-converter';
 import {ariaProperty} from '@material/web/decorators/aria-property';
 import {html, LitElement, PropertyValues, TemplateResult} from 'lit';
 import {property, query, state} from 'lit/decorators';
@@ -33,7 +34,6 @@ export type UnsupportedTextFieldType =
 export type InvalidTextFieldType =
     'button'|'checkbox'|'hidden'|'image'|'radio'|'range'|'reset'|'submit';
 
-
 /** @soyCompatible */
 export class TextField extends LitElement {
   static override shadowRootOptions:
@@ -84,14 +84,16 @@ export class TextField extends LitElement {
     return this.closest('form');
   }
 
-  @property({type: String, reflect: true}) name = '';
+  @property({type: String, reflect: true, converter: stringConverter})
+  name = '';
 
   [getFormValue]() {
     return this.value;
   }
 
   // <input> properties
-  @property({type: String, reflect: true}) placeholder = '';
+  @property({type: String, reflect: true, converter: stringConverter})
+  placeholder = '';
   @property({type: Boolean, reflect: true}) readonly = false;
   // TODO(b/237284412): replace with exported types
   @property({type: String, reflect: true})