Textfield's Icon cannot be Clicked on with `on:click`

[mkmoisen]

Describe the bug It does not seem possible to add anon:click to an Icon belonging to a Textfield.

Clicking on the Icon doesn't do anything.

To Reproduce Steps to reproduce the behavior:

<script>
    import Textfield from '@smui/textfield';
    import Icon from '@smui/textfield/icon';

    let foo;
</script>

<form>

    <Textfield bind:value={foo} label="Foo">

        <Icon 
            class="material-icons" 
            slot="trailingIcon"
            on:click={
                () => {
                    console.log('bar');
                }
            }
        >
            add
        </Icon>

    </Textfield>

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):

• Browser chrome, firefox

Additional context

It does work if you wrap the Icon in a div and add the on:click the the div. However, this causes a11y warnings that can only be resolved by writing more javascript code to handle keypresses.

[hperrin]

This is by design, actually.

https://github.com/material-components/material-components-web/blob/master/packages/mdc-textfield/icon/foundation.ts#L117

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.

[mkmoisen]

@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.

[scippio]

I think you have to use a IconButton