react-uswds icon indicating copy to clipboard operation
react-uswds copied to clipboard

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

Open etanb opened this issue 1 year ago • 3 comments

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 avatar Mar 20 '24 18:03 etanb

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 avatar Mar 20 '24 20:03 etanb

Demo of the "fix":

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

etanb avatar Mar 20 '24 20:03 etanb

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

kimallen avatar Apr 17 '24 19:04 kimallen