feat(textfield): textfield can now turn off auto complete

components/textfield/src/vwc-textfield.ts

@@ -66,6 +66,12 @@ export class VWCTextField extends MWCTextField {
  })
  shape?: TextfieldShape;
 
+ @property({
+ type: String,
+ reflect: true
+ })
+ autocomplete?: string;
+
  @property({
  type: String,
  reflect: true
@@ -331,6 +337,7 @@ export class VWCTextField extends MWCTextField {
  setAttributeByValue('type', this.type, fe);
  setAttributeByValue('form', this.form, fe);
  setAttributeByValue('placeholder', this.placeholder, fe);
+ setAttributeByValue('autocomplete', this.autocomplete, fe);
 
  setAttributeByValue('min', this.min, fe);
  setAttributeByValue('max', this.max, fe);

components/textfield/test/textfield.test.js

@@ -12,15 +12,11 @@ import {
  listenToSubmission,
  getRandom,
 } from '../../../test/test-helpers.js';
-import {
- shapeRoundedTestCases,
- shapePillTestCases,
-} from '../../../test/shared.js';
+
 import {
  typographyTestCases,
  assertDenseStyles,
  hasNotchedOutline,
- validateMultipleShadowLayers,
  validateOnReset,
 } from '@vonage/vvd-foundation/test/input-utils.test.js';
 import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
@@ -33,20 +29,10 @@ function getHiddenInput(formElement, fieldName) {
 }
 
 describe('textfield', () => {
- const addElement = isolatedElementsCreation();
-
  it('should be defined as a custom element', async () => {
  expect(Boolean(customElements.get(COMPONENT_NAME))).to.equal(true);
  });
-
- it('should have internal contents', async () => {
- const [e] = addElement(
- textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
- );
- await waitNextTask();
- expect(e).lightDom.equalSnapshot();
- expect(e).shadowDom.equalSnapshot();
- });
+ const addElement = isolatedElementsCreation();
 
  it('should have the MWC input class transparent for events', async () => {
  const [e] = addElement(
@@ -182,6 +168,34 @@ describe('textfield', () => {
  expect([...externalForm.elements].includes(inputElement)).to.equal(true);
  });
 
+ describe(`autocomplete`, function () {
+ it('should set autocomplete on the internal input', async function () {
+ const [formElement] = addElement(createElementInForm(fieldName, fieldValue));
+ const inputElement = formElement
+ .querySelector(COMPONENT_NAME);
+ await inputElement.updateComplete;
+ const internalInput = inputElement.formElement;
+ const autoCompleteDefault = internalInput.getAttribute('autocomplete');
+
+ inputElement.autocomplete = 'off';
+ await inputElement.updateComplete;
+ expect(autoCompleteDefault).to.equal(null);
+ expect(internalInput.getAttribute('autocomplete')).to.equal('off');
+
+ });
+
+ it('should reflect the name on the internal input', async function () {
+ const [formElement] = addElement(createElementInForm(fieldName, fieldValue));
+ const inputElement = formElement
+ .querySelector(COMPONENT_NAME);
+ await inputElement.updateComplete;
+ const internalInput = inputElement.formElement;
+ inputElement.name = 'name';
+ await inputElement.updateComplete;
+ expect(internalInput.getAttribute('name')).to.equal('name');
+ });
+ });
+
  describe(`value binding`, function () {
  it(`should reset the value of the custom element to default on form reset`, async function () {
  const [formElement] = addElement(
@@ -250,10 +264,6 @@ describe('textfield', () => {
  expect(submitted).to.equal(false);
  });
  });
-
- it(`should work under multiple shadow layers`, async function () {
- validateMultipleShadowLayers(COMPONENT_NAME, 'input');
- });
  });
 
  describe('notched outlined', () => {
@@ -336,11 +346,6 @@ describe('textfield', () => {
  });
  });
 
- describe('shape', () => {
- shapeRoundedTestCases(COMPONENT_NAME);
- shapePillTestCases(COMPONENT_NAME);
- });
-
  describe('label', () => {
  let textFieldEl;