Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
ethanwmiller opened this issue Aug 20, 2024 · 3 comments
Closed

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

ethanwmiller opened this issue Aug 20, 2024 · 3 comments
Assignees
@jordanjones243
Labels
auro-input

Comments

@ethanwmiller
Copy link

ethanwmiller commented Aug 20, 2024 •
edited
Loading

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/[email protected]/dist/tokens/CSSCustomProperties.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/dist/bundled/essentials.css"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/[email protected]/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>
@ethanwmiller ethanwmiller added auro-input not-reviewed Issue has not been reviewed by Auro team members Type: Bug Bug or Bug fixes labels Aug 20, 2024
@blackfalcon
Copy link
Member

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 [email protected] until the UI issue can be resolved.

@Patrick-Daly-AA Patrick-Daly-AA removed their assignment Aug 21, 2024
@jordanjones243
Copy link
Contributor

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 jordanjones243 mentioned this issue Sep 18, 2024
Closed
6 tasks
@jordanjones243 jordanjones243 removed the not-reviewed Issue has not been reviewed by Auro team members label Sep 25, 2024
@jordanjones243
Copy link
Contributor

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

@jordanjones243 jordanjones243 mentioned this issue Sep 30, 2024
Merged
6 tasks
@jason-capsule42 jason-capsule42 removed the Type: Bug Bug or Bug fixes label Oct 3, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@jordanjones243 jordanjones243

Labels
auro-input
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@blackfalcon @jason-capsule42 @jordanjones243 @ethanwmiller @Patrick-Daly-AA