[HxSearch] the search icon isn't clickable

[blanchardglen]

Loving using Havit :)

We are using HxSearch as a fancy select/option box with a Chevron down icon to make it visually appear to be one.

But clicking/tapping on the chevron doesn't trigger the dropdown like it does when clicking on the rest of the component.

https://github.com/havit/Havit.Blazor/blob/d554f5467f5c5a79548cfbe126a0a260df9f2f84/Havit.Blazor.Components.Web.Bootstrap/Forms/SearchBox/HxSearchBox.razor#L65-L70

Perhaps a click on the search icon could trigger HandleInputFocus or wrapping the search icon in a <label for="@_inputId">...</label>

Would a PR for this be accepted and which method would be preferred if they both work?

Side note: As a workaround I could remove the chevron but that is harder than it appears to be, setting it to null and the defaults which can't be nulled take over, the best I could do was to replace it with a transparent icon.

[hakenr]

We are using HxSearch as a fancy select/option box with a Chevron down icon to make it visually appear to be one.

Please note that HxSearchBox lacks the complete functionality of HxInputBase, e.g., it doesn't support validation.

I agree we should find a way to handle clicks on the SearchIcon.

But clicking/tapping on the chevron doesn't trigger the dropdown, unlike when you click on the rest of the component.

I understand your scenario, but clicking the component doesn't always open the dropdown. There are numerous scenarios where clicking the input behaves differently.

We could consider forwarding the click event from the icon to the click event of the input, but I'm undecided if clicking the "magnifier" icon—especially when there's text entered in the input—shouldn't be interpreted as initiating a search (submit/Enter)?

@crdo?

(If we reach a consensus on the desired behavior, I'd be more than happy to encourage you to contribute by submitting a PR for it. ;-))

[crdo]

@blanchardglen until we agree on some solution, there is an easy work-around for this.

You can set pointer-events: none; on .hx-search-box-input-icon so the click on the icon wrapper propagates to the underlying input.

[blanchardglen]

You can set pointer-events: none; on .hx-search-box-input-icon so the click on the icon wrapper propagates to the underlying input.

That works a treat, thank you. I can still do a PR for this when a decision is made but that solves my immediate need.

[hakenr]

@blanchardglen, do you have any alternative suggestions for the proposed PR aside from pointer-events: none;? I currently don't see it as the ideal solution, since we've encountered some issues related to pointer-events before.