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`