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.

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

[fix] <Search/> component does not have "X" to clear #2841

Open
etanb opened this issue Mar 20, 2024 · 3 comments
Open

[fix] <Search/> component does not have "X" to clear #2841

etanb opened this issue Mar 20, 2024 · 3 comments
Labels
type: bug Something isn't working like it's supposed to

Comments

@etanb
Copy link

etanb commented Mar 20, 2024

ReactUSWDS Version & USWDS Version:

"@trussworks/react-uswds": "^6.2.0",
"@uswds/uswds": "3.4.1",

Describe the bug

By default the USWDS Search component has the "X" to clear input functionality.

In Trussworks' implementation of the Search component, there is no "X" to clear input functionality. That seems to be exclusively available to items that utilize the <ComboBox />.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the Search component
  2. https://trussworks.github.io/react-uswds/?path=/story/components-search-search--default-search
  3. Attempt to clear via "X" to clear
  4. There is none

Screenshots

USWDS Search input:

Screenshot 2024-03-20 at 11 54 00 AM

Trussworks Search input:

Screenshot 2024-03-20 at 11 54 11 AM

@etanb etanb added the type: bug Something isn't working like it's supposed to label Mar 20, 2024
@etanb
Copy link
Author

etanb commented Mar 20, 2024

I think I found the issue, since that "X" is appearing as a native HTML element due to type="search" being an attribute on the <input> field, so I realized the class usa-input on the <form> is removing the "X"!

@etanb
Copy link
Author

etanb commented Mar 20, 2024

Demo of the "fix":

inputFix.mp4

@kimallen
Copy link
Contributor

Noting that there is no 'x' even on the USWDS Search component if I'm using Firefox, but on Chrome it does appear.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working like it's supposed to
Projects
None yet
Development

No branches or pull requests

2 participants