Open mkmoisen opened 1 year ago
This is by design, actually.
Allowing the click event to happen would cause the input to become focused, which is not what we want. Instead, there is a special event "SMUITextField:icon" that is fired when the icon is clicked or interacted with. So you can listen for that event instead. I should improve the docs to make that more discoverable.
@hperrin
Would you mind providing a quick example? Apologies, I am a beginner to Svelte and SMU.
I tried the following with no luck:
<script>
import Textfield from '@smui/textfield';
import Icon from '@smui/textfield/icon';
let foo = "foo"
</script>
<form>
<Textfield bind:value={foo} label="Foo" >
<Icon
class="material-icons"
slot="trailingIcon"
on:SMUITextField:icon={
() => {
console.log('bar');
}
}
>
add
</Icon>
</Textfield>
</form>
In addition I tried placing the on:SMUITextField:icon
on the Textfield
.
I think you have to use a IconButton
Describe the bug It does not seem possible to add an
on:click
to anIcon
belonging to aTextfield
.Clicking on the
Icon
doesn't do anything.To Reproduce Steps to reproduce the behavior:
If you try to click on the icon, nothing will happen.
Expected behavior The
on:click
event should activate when you click on the icon.Desktop (please complete the following information):
Additional context
It does work if you wrap the
Icon
in adiv
and add theon:click
the thediv
. However, this causes a11y warnings that can only be resolved by writing more javascript code to handle keypresses.