search

trussworks / react-uswds

USWDS 3.0 components built in React
https://trussworks.github.io/react-uswds/
Apache License 2.0
182 stars 81 forks source link

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

Open etanb opened 6 months ago

etanb commented 6 months ago

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 commented 6 months ago

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 commented 6 months ago

Demo of the "fix":

https://github.com/trussworks/react-uswds/assets/516877/2acaa705-6ca5-41a5-93c9-3193f695aa98

kimallen commented 5 months ago

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