AlaskaAirlines / auro-input

Custom HTML element for inputting string data in forms
https://auro.alaskaair.com/components/auro/input
Apache License 2.0
2 stars 4 forks source link

Resetting value of auro-input does not reset label text #265

Closed ethanwmiller closed 1 year ago

ethanwmiller commented 1 year ago

Please verify the version of auro-input you have installed

2.14.1

Please describe the bug

Create an auro-input component with a specific id and a label text slot. Create a button with a click handler that sets the value of the input to undefined. Type something in the input, then click the button to reset the value. The value is reset correctly, but the label text stays stuck in the "active" position.

Example component code:

      <auro-input
        id="comments-input"
        bordered
      >
        <span slot="label">{"Comments"}</span>
      </auro-input>

Example of resetting the element's value:

    const elem = document.querySelector('#comments-input');
    elem.value = undefined;

Two screenshots: one is of the label text in the initial state, the second is of the label text stuck in the "active" state after the value got set to undefined with the code above.

Screen Shot 2023-09-12 at 2 23 24 PM Screen Shot 2023-09-12 at 2 23 16 PM

Reproducing the error on the docsite

This issue cannot be reproduced on the Auro docsite

Expected behavior

When the value of the input is reset to undefined, the label text should reset to its initial position.

What browsers are you seeing the problem on?

Chrome

Additional context

NOTE: the docsite for this feature is broken; the example buttons for resetting the input value do not work (on my browser at least). https://auro.alaskaair.com/components/auro/input