Address input bugs

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>

components/combobox/apiExamples/resetState.js

@@ -0,0 +1,7 @@
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}

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

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
 

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

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.input.reset();
+    this.validation.reset(this);
+  }
+
   updated(changedProperties) {
     // After the component is ready, send direct value changes to auro-menu.
     if (changedProperties.has('value')) {

components/datepicker/apiExamples/resetState.html

@@ -0,0 +1,6 @@
+<auro-button id="resetStateBtn">Reset</auro-button>
+
+<auro-datepicker id="resetStateExample" range minDate="06/30/2025" calendarStartDate="06/30/2025" calendarFocusDate="06/30/2025" value="02/14/2025" valueEnd="04/05/2025" setCustomValidityRangeUnderflow="The date you entered is too early.">
+  <span slot="fromLabel">Choose a date</span>
+  <span slot="mobileDateLabel">Choose a date</span>
+</auro-datepicker>

components/datepicker/apiExamples/resetState.js

@@ -0,0 +1,7 @@
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}

components/datepicker/demo/api.js

@@ -7,6 +7,7 @@ import { updateMaxDateExample } from './../apiExamples/updateMaxDate';
 import { updateMinDateExample } from './../apiExamples/updateMinDate';
 import { validityExample } from './../apiExamples/validity';
 import { inDialogExample } from '../apiExamples/inDialog.js';
+import { resetStateExample } from '../apiExamples/resetState.js';
 import '../src/index.js';
 
 export function initExamples(initCount) {
@@ -22,6 +23,7 @@ export function initExamples(initCount) {
     updateMinDateExample();
     validityExample();
     inDialogExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

components/datepicker/docs/api.md

@@ -29,6 +29,7 @@
 | Method  | Type                         | Description                                      |
 |---------|------------------------------|--------------------------------------------------|
 | `focus` | `(focusInput: string): void` | Focuses the datepicker trigger input.<br /><br />**focusInput**: Pass in `endDate` to focus on the return input. No parameter is needed to focus on the depart input. |
+| `reset` | `(): void`                   | Resets component to initial state.               |
 
 ## Events
 

components/datepicker/docs/partials/api.md

@@ -421,6 +421,25 @@ The popover slot is intended for use with calendar dates that are `disabled` (e.
 
 ## Functional Examples
 
+#### Reset State
+
+<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>
+
+
 #### Dynamic Slot Content
 
 This example demonstrates data driven slot content for days in the calendar. In this example, the slot content is inserted into each `auro-calendar-cell` after the bib of the `auro-datepicker` is opened, simulating an API call on a dynamic data source.

components/datepicker/src/auro-datepicker.js

@@ -689,6 +689,18 @@ export class AuroDatePicker extends LitElement {
     this.dispatchEvent(new CustomEvent('auroDatePicker-newSlotContent'));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.inputList.forEach((input) => {
+      input.reset();
+    });
+
+    this.validation.reset(this);
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('calendarFocusDate')) {
       this.handleFocusDateChange();

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>

components/input/apiExamples/resetState.js

@@ -0,0 +1,7 @@
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}

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

components/input/docs/api.md

@@ -24,12 +24,11 @@ Generate unique names for dependency components.
 | `helpText`                        | `helpText`                        | `String`  |                            | Deprecated, see `slot`.                          |
 | `icon`                            | `icon`                            | `Boolean` | false                      | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
 | `id`                              | `id`                              | `String`  |                            | Sets the unique ID of the element.               |
-| `isValid`                         | `isValid`                         | `String`  | false                      | (DEPRECATED - Please use validity) Can be accessed to determine if the input validity. Returns true when validity has not yet been checked or validity = 'valid', all other cases return false. Not intended to be set by the consumer. |
 | `label`                           | `label`                           | `String`  | "Input label is undefined" | Deprecated, see `slot`.                          |
 | `lang`                            | `lang`                            | `String`  |                            | defines the language of an element.              |
-| `max`                             | `max`                             | `String`  | "undefined"                | The maximum value allowed. This only applies for inputs with a type of `numeric` and all date formats. |
+| `max`                             | `max`                             | `String`  | "undefined"                | The maximum value allowed. This only applies for inputs with a type of `number` and all date formats. |
 | `maxLength`                       | `maxLength`                       | `Number`  | "undefined"                | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher. |
-| `min`                             | `min`                             | `String`  | "undefined"                | The minimum value allowed. This only applies for inputs with a type of `numeric` and all date formats. |
+| `min`                             | `min`                             | `String`  | "undefined"                | The minimum value allowed. This only applies for inputs with a type of `number` and all date formats. |
 | `minLength`                       | `minLength`                       | `Number`  | "undefined"                | The minimum number of characters the user can enter into the text input. This must be an non-negative integer value smaller than or equal to the value specified by `maxlength`. |
 | `name`                            | `name`                            | `String`  |                            | Populates the `name` attribute on the input.     |
 | `noValidate`                      | `noValidate`                      | `Boolean` | false                      | If set, disables auto-validation on blur.        |
@@ -57,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

components/input/docs/partials/api.md

@@ -123,7 +123,7 @@ Note: Setting the `value` to `undefined` will also reset the element.
 
 ### Max <a name="max"></a>
 
-Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `numeric` or any date format.
+Use the `max` attribute to define a maximum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.
 
 The `max` attribute should be used in combination with the `setCustomValidityRangeOverflow` attribute to define help text used when the `max` attribute validation fails.
 
@@ -142,24 +142,24 @@ The `max` attribute should be used in combination with the `setCustomValidityRan
 
 </auro-accordion>
 
-#### Numeric Example
+#### Number Example
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumeric.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/maxNumber.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxNumeric.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/maxNumber.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
 
 ### Min <a name="min"></a>
 
-Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for numeric or any date format.
+Use the `min` attribute to define a minimum value used during validation. The attribute will only apply when `<auro-input>` also has a `type` attribute for `number` or any date format.
 
 The `min` attribute should be used in combination with the `setCustomValidityRangeUnderflow` attribute to define help text used when the `min` attribute validation fails.
 
@@ -178,17 +178,17 @@ The `min` attribute should be used in combination with the `setCustomValidityRan
 
 </auro-accordion>
 
-#### Numeric Example
+#### Number Example
 
 <div class="exampleWrapper">
-  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumeric.html) -->
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/minNumber.html) -->
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minNumeric.html) -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/minNumber.html) -->
 <!-- AURO-GENERATED-CONTENT:END -->
 
 </auro-accordion>
@@ -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.