From 54eb955f6af4d9379dbc00d2faec3570ee80794c Mon Sep 17 00:00:00 2001
From: Jordan Jones <jmjones2463@gmail.com>
Date: Fri, 20 Dec 2024 10:48:04 -0800
Subject: [PATCH] feat: add reset functionality to all form components #135

---
 .../combobox/apiExamples/resetState.html       | 13 +++++++++++++
 components/combobox/apiExamples/resetState.js  |  7 +++++++
 components/combobox/demo/api.js                |  4 +++-
 components/combobox/docs/api.md                |  1 +
 components/combobox/docs/partials/api.md       | 18 ++++++++++++++++++
 components/combobox/src/auro-combobox.js       | 14 +++++++++++++-
 components/input/apiExamples/resetState.html   |  6 ++++++
 components/input/apiExamples/resetState.js     |  7 +++++++
 components/input/demo/api.js                   |  2 ++
 components/input/docs/api.md                   |  1 +
 components/input/docs/partials/api.md          | 18 ++++++++++++++++++
 components/input/src/base-input.js             |  7 +++++++
 packages/form-validation/src/validation.js     | 15 +++++++++++++++
 13 files changed, 111 insertions(+), 2 deletions(-)
 create mode 100644 components/combobox/apiExamples/resetState.html
 create mode 100644 components/combobox/apiExamples/resetState.js
 create mode 100644 components/input/apiExamples/resetState.html
 create mode 100644 components/input/apiExamples/resetState.js

diff --git a/components/combobox/apiExamples/resetState.html b/components/combobox/apiExamples/resetState.html
new file mode 100644
index 00000000..65bf286a
--- /dev/null
+++ b/components/combobox/apiExamples/resetState.html
@@ -0,0 +1,13 @@
+<auro-button id="resetStateBtn">Reset</auro-button>
+
+<auro-combobox id="resetStateExample" required>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
diff --git a/components/combobox/apiExamples/resetState.js b/components/combobox/apiExamples/resetState.js
new file mode 100644
index 00000000..96d5124b
--- /dev/null
+++ b/components/combobox/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/combobox/demo/api.js b/components/combobox/demo/api.js
index eb3eb943..bb083a6c 100644
--- a/components/combobox/demo/api.js
+++ b/components/combobox/demo/api.js
@@ -3,7 +3,8 @@
 import { dynamicMenuExample } from '../apiExamples/dynamicMenu';
 import { valueExample } from '../apiExamples/value';
 import { focusExample } from '../apiExamples/focus';
-import { inDialogExample } from '../apiExamples/inDialog.js';
+import { inDialogExample } from '../apiExamples/inDialog';
+import { resetStateExample } from '../apiExamples/resetState';
 
 
 import { AuroCombobox } from '../src/auro-combobox.js';
@@ -20,6 +21,7 @@ export function initExamples(initCount) {
     valueExample();
     focusExample();
     inDialogExample();
+    resetStateExample();
   } catch (err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called
diff --git a/components/combobox/docs/api.md b/components/combobox/docs/api.md
index 1dd5d9a5..e9dc6113 100644
--- a/components/combobox/docs/api.md
+++ b/components/combobox/docs/api.md
@@ -22,6 +22,7 @@
 | Method  | Type       | Description                         |
 |---------|------------|-------------------------------------|
 | `focus` | `(): void` | Focuses the combobox trigger input. |
+| `reset` | `(): void` | Resets component to initial state.  |
 
 ## Events
 
diff --git a/components/combobox/docs/partials/api.md b/components/combobox/docs/partials/api.md
index 17986acc..749eec51 100644
--- a/components/combobox/docs/partials/api.md
+++ b/components/combobox/docs/partials/api.md
@@ -206,6 +206,24 @@ The focus method will apply focus state to the combobox input field.
 
 </auro-accordion>
 
+#### reset
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ### Slot Examples
 
 #### helpText
diff --git a/components/combobox/src/auro-combobox.js b/components/combobox/src/auro-combobox.js
index 74074d4f..77ef7282 100644
--- a/components/combobox/src/auro-combobox.js
+++ b/components/combobox/src/auro-combobox.js
@@ -434,7 +434,7 @@ export class AuroCombobox extends LitElement {
       }
 
       // hide the menu if the value is empty otherwise show if there are available suggestions
-      if (this.input.value.length === 0) {
+      if (this.input.value && this.input.value.length === 0) {
         this.hideBib();
         this.classList.remove('combobox-filled');
       } else if (!this.dropdown.isPopoverVisible && this.availableOptions) {
@@ -572,6 +572,18 @@ export class AuroCombobox extends LitElement {
     this.input.focus();
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    // Resets the help text of the combobox
+    this.auroInputHelpText = undefined;
+
+    this.validation.reset(this.input);
+    this.validation.reset(this);
+  }
+
   updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {
diff --git a/components/input/apiExamples/resetState.html b/components/input/apiExamples/resetState.html
new file mode 100644
index 00000000..fd44f8cc
--- /dev/null
+++ b/components/input/apiExamples/resetState.html
@@ -0,0 +1,6 @@
+<auro-button id="resetStateBtn">Reset</auro-button>
+
+<auro-input id="resetStateExample" bordered minlength="12" value="Auro Team" setCustomValidityTooShort="Please enter your full name!">
+  <slot slot="label">Full Name</slot>
+  <slot slot="helptext">Please enter your full name.</slot>
+</auro-input>
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/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..55402580 100644
--- a/components/input/docs/partials/api.md
+++ b/components/input/docs/partials/api.md
@@ -604,6 +604,24 @@ Use the `type="fullYear"` attribute for a date formatted input.
 
 ## Additional Use Cases
 
+### Resetting the Input
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/resetState.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/resetState.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/resetState.js) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ### 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 68918363..c0c491c8 100644
--- a/components/input/src/base-input.js
+++ b/components/input/src/base-input.js
@@ -690,6 +690,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/packages/form-validation/src/validation.js b/packages/form-validation/src/validation.js
index 8ffe2462..df1e835e 100644
--- a/packages/form-validation/src/validation.js
+++ b/packages/form-validation/src/validation.js
@@ -12,6 +12,21 @@ export default class AuroFormValidation {
     this.runtimeUtils = new AuroLibraryRuntimeUtils();
   }
 
+  /**
+   * Resets the element to its initial state.
+   * @private
+   * @param {object} elem - HTML element to reset.
+   * @returns {void}
+   */
+  reset(elem) {
+    elem.validity = undefined;
+    elem.value = undefined;
+
+    // Runs validation to handle error attribute
+    this.validate(elem);
+  }
+  
+
   /**
    * Determines the validity state of the element based on the common attribute restrictions (pattern).
    * @private