[Feat]: Add a way to distinguish the clear button sp-search

[adixon-adobe]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

sp-search

Description of the requested feature

There's no way via the sp-search API to distinguish the clear button being pressed from someone clearing the search input and blurring the input.

This is problematic, since the clear button is a more explicit action, and also clears focus. In our app we'd like to submit the search when it's clicked, but not just from blurring the input.

It'd be nice if clicking the clear button triggered something like a clear event.

Mockups or screenshots

No response

Implementation notes or ideas

No response

[adixon-adobe]

I can also see that 2 change events trigger when you click the "close" button, one with the pre-clear text value, and one with the empty string.

[Westbrook]

Is the double change as per this work flow:

1. Type text (get input events)
2. Click "clear" (get one change for blurring the input and committing what you typed)
3. Form is reset (get one change for moving the value to '')
   That would be expected.

There's a reset event on the <form> internal to the element when the "clear" button is pressed. Would redispatching that on the host align with what you're trying to achieve here?

If so, that sounds like a PR we'd 100% accept!

[adixon-adobe]

That matches the steps I'm doing and what I'm seeing, yes.

Personally I don't think the change event at step 2 is actually desired. It feels like that one should get suppressed by the clear button press if possible.

[Westbrook]

I'm not sure this clarifies the interaction with the clear button, but it does give us some food for though for how to alter the API here: https://codepen.io/Westbrook/pen/jORWrYe?editors=1111

Keys:

• 1
• 2
• 3
• Click the clear button

Logs:

• input "1"
• input "12"
• input "123"
• input ""
• search ""