search

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

Weird blue spot appears instead of the "x" icon in auro-input v3.1.1 #328

Closed ethanwmiller closed 1 month ago

ethanwmiller commented 3 months ago

Please verify the version of auro-input you have installed

3.1.1

Please describe the bug

  1. Install latest version of auro-input, WCSS, and design tokens
  2. Create an auro-input element
  3. Type text into it
  4. A weird blue spot appears

The docsite does not show the latest version of auro-input; it has version 3.0.1 which does not have this issue.

Reproducing the error on the docsite

This issue cannot be reproduced on the Auro docsite

Expected behavior

Expected behavior: the "x" icon to clear the input shows up when you type into the input, not a weird blue spot in the corner.

What browsers are you seeing the problem on?

Firefox, Chrome, Safari

Additional context

Here are two screenshots. One shows the expected behavior, which works in version 3.0.1, and the other shows the bug in version 3.1.1. I've also pasted a simple HTML file which reproduces the issue.

Screen Shot 2024-08-20 at 2 00 02 PM Screen Shot 2024-08-20 at 2 00 13 PM 
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm//@aurodesignsystem/design-tokens@4.9.1/dist/tokens/CSSCustomProperties.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@5.1.2/dist/bundled/essentials.css"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-input@3.1.1/dist/auro-input__bundled.js"
      type="module"
    ></script>
  </head>
  <body>
    <div>
      <h1>Example</h1>
      <br />
    </div>
    <div>
      <auro-input value="Alaska Airlines is the best!" bordered>
        <span slot="label">Name</span>
        <span slot="helptext">Please enter your full name.</span>
      </auro-input>
    </div>
  </body>
</html>
blackfalcon commented 3 months ago

This issue has been validated and is a bug introduced with v3.1.0. It appears there is an issue with the new dependency on using auro-button versus a standard button element in the UI.

Recommend using auro-input@3.0.1 until the UI issue can be resolved.

jordanjones243 commented 2 months ago

This issue is a bug coming from input where it is using a version of button that has not been released yet. This will be fixed once button's theming support is released and we update the version of auro-button within the repo. Moving ticket to blocked.

jordanjones243 commented 1 month ago

The work completed to fix this bug was done in this released PR: