Iconinput icon click handler

[howesteve]

Hellow,

Is there a way to attach a "on:click" handler on an icon? I need to implement a "Show/hide" password handler.

Thanks

[shinokada]

You can add on:click event handler to svelte-heros icons.

<script>
  import { ChevronDown } from 'svelte-heros'
  const handleClick = () =>{
    console.log('clicked')
  }
</script>
<ChevronDown on:click={handleClick} />

[howesteve]

As the title says, I mean an icon inside the 's icon property, not in a standalone Icon. It seems to me it should have been implemented as a slot, not as a property.

I need to implement something like this:

https://svelte.dev/repl/3632c24a5c094528b961dc2c7ed119a4?version=3.32.3

Thanks

[shinokada]

I updated the Iconinput component and add this example, https://flowbite-svelte.com/forms/input-field#Iconinput_click_handler.
Can you confirm if this is what you need.

[howesteve]

That's what I needed, thanks. Such a quick response. However, there are two minor interface glitches.

1. The mouse cursor should become a "pointer" when hovering the icon so that the user understand it's clickable. So I added "cursor-pointer" to the class, and it works, but if noBorder is set, it doesn't. Is this a bug or did I do anything wrong?
2. The input is loosing focus when the icon is clicked, and the user has to click back the input to regain focus.
   Do you think it's worth to update the example with them?

[shinokada]

I will have a look.

[shinokada]

I added one more prop pointerEvent. The reason is that otherwise all icon shows cursor.
I also updated/added examples, https://flowbite-svelte.com/forms/input-field#Iconinput_click_handler

Regarding autofocus, please read, https://svelte.dev/docs#accessibility-warnings-a11y-autofocus.
https://www.a11yproject.com/checklist/#avoid-using-the-autofocus-attribute
What do you think?