AlaskaAirlines / auro-input

Custom HTML element for inputting string data in forms

Home Page:https://auro.alaskaair.com/components/auro/input

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Resetting value of auro-input does not reset label text

ethanwmiller opened this issue · comments

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