diff --git a/components/input/apiExamples/resetState.html b/components/input/apiExamples/resetState.html new file mode 100644 index 00000000..0532290a --- /dev/null +++ b/components/input/apiExamples/resetState.html @@ -0,0 +1,7 @@ +Reset +

+ + + Full Name + Please enter your full name. + diff --git a/components/input/apiExamples/resetState.js b/components/input/apiExamples/resetState.js new file mode 100644 index 00000000..96d5124b --- /dev/null +++ b/components/input/apiExamples/resetState.js @@ -0,0 +1,7 @@ +export function resetStateExample() { + const elem = document.querySelector('#resetStateExample'); + + document.querySelector('#resetStateBtn').addEventListener('click', () => { + elem.reset(); + }); +} diff --git a/components/input/apiExamples/value.html b/components/input/apiExamples/value.html index efba03dc..34ab0291 100644 --- a/components/input/apiExamples/value.html +++ b/components/input/apiExamples/value.html @@ -1,5 +1,5 @@ Set Value to Alaska -Reset +Set Value to Undefined Name diff --git a/components/input/apiExamples/value.js b/components/input/apiExamples/value.js index b6f69f41..26a32813 100644 --- a/components/input/apiExamples/value.js +++ b/components/input/apiExamples/value.js @@ -3,11 +3,11 @@ export function programmaticallySetValue() { // set value of auro-input element document.querySelector('#setValidValueBtn').addEventListener('click', () => { - elem.value = "Alaska Airlines is the best"; + elem.value = "Alaska Airlines is the best"; }); // reset the value of auro-input element - document.querySelector('#resetValueBtn').addEventListener('click', () => { - elem.value = ''; + document.querySelector('#setUndefinedValueBtn').addEventListener('click', () => { + elem.value = undefined; }); } diff --git a/components/input/demo/api.js b/components/input/demo/api.js index 4ae7ab82..b912234d 100644 --- a/components/input/demo/api.js +++ b/components/input/demo/api.js @@ -3,6 +3,7 @@ import { customError } from "../apiExamples/error"; import { setReadonlyValue } from "../apiExamples/readonly"; import { swapInputValues } from "../apiExamples/swapValue"; import { programmaticallySetValue } from "../apiExamples/value"; +import { resetStateExample } from "../apiExamples/resetState"; import './index.js'; export function initExamples(initCount) { @@ -14,6 +15,7 @@ export function initExamples(initCount) { setReadonlyValue(); swapInputValues(); programmaticallySetValue(); + resetStateExample(); } catch (error) { if (initCount <= 20) { // setTimeout handles issue where content is sometimes loaded after the functions get called diff --git a/components/input/docs/api.md b/components/input/docs/api.md index bc676b99..9718d244 100644 --- a/components/input/docs/api.md +++ b/components/input/docs/api.md @@ -56,6 +56,7 @@ Generate unique names for dependency components. | Method | Type | Description | |--------------|---------------|------------------------------------------| | `isDateType` | `(): boolean` | | +| `reset` | `(): void` | Resets component to initial state. | | `validate` | `(): void` | Public method force validation of input. | ## Events diff --git a/components/input/docs/partials/api.md b/components/input/docs/partials/api.md index 392b016a..6c26d9c2 100644 --- a/components/input/docs/partials/api.md +++ b/components/input/docs/partials/api.md @@ -604,6 +604,26 @@ Use the `type="fullYear"` attribute for a date formatted input. ## Additional Use Cases +### Reset State + +Use the `reset()` method to reset the ``'s `value` and `validity` state. Doing so will preserve all other attributes and properties. + +
+ + +
+ + + See code + + + + + + + + + ### Swapping Values Between Inputs Example illustrates using a JavaScript function attached to an `auro-button` component `click` event to swap the values of two `auro-input` elements. An example of this use case would be swapping the departure and arrival airports in a flight search form. diff --git a/components/input/src/base-input.js b/components/input/src/base-input.js index 7b50e015..bb838978 100644 --- a/components/input/src/base-input.js +++ b/components/input/src/base-input.js @@ -159,10 +159,7 @@ export default class BaseInput extends LitElement { name: { type: String }, type: { type: String, reflect: true }, - value: { - type: String, - reflect: true - }, + value: { type: String }, lang: { type: String }, pattern: { type: String, @@ -691,6 +688,13 @@ export default class BaseInput extends LitElement { this.validation.validate(this); } + /** + * Resets component to initial state. + * @returns {void} + */ + reset() { + this.validation.reset(this); + } /** * Sets configuration data used elsewhere based on the `type` attribute. diff --git a/components/input/test/auro-input.test.js b/components/input/test/auro-input.test.js index f9803392..72506111 100644 --- a/components/input/test/auro-input.test.js +++ b/components/input/test/auro-input.test.js @@ -2,7 +2,6 @@ import { fixture, html, expect, elementUpdated, oneEvent } from '@open-wc/testin import '../src/index.js'; describe('auro-input', () => { - it('web component is successfully created in the document', async () => { // This test fails when attributes are put onto the component before it is attached to the DOM const el = document.createElement('auro-input'); @@ -510,7 +509,7 @@ describe('auro-input', () => { it('type numeric checked correctly when using the min attribute', async () => { const el = await fixture(html` - + `) el.value = '10'; @@ -528,7 +527,7 @@ describe('auro-input', () => { it('type numeric checked correctly when using the min attribute', async () => { const el = await fixture(html` - + `) el.value = '10'; @@ -578,6 +577,21 @@ describe('auro-input', () => { expect(el.shadowRoot.querySelector('#checkSpellCheck')).to.not.have.attribute('autocapitalize'); }); + it('reset method clears the value and validity state', async () => { + const el = await fixture(html` + + `); + + expect(el.getAttribute('validity')).to.be.equal('tooShort'); + + el.reset(); + + await elementUpdated(el); + + expect(el.hasAttribute('validity')).to.be.false; + expect(el.value).to.equal(undefined); + }); + describe('handles date formatting', () => { it('MM/DD/YYYY', async () => { const el = await fixture(html`