Expose click handler on icon in input field

[falxcerebri]

The icon in input field is clickable, but I cannot find a way to handle the event.

<material-input icon="true" waves-color="#2f6975" label="Icon input">
    <i class="material-icons" onclick="..." >search</i>
</material-input>

[kysonic]

@falxcerebri . Done.

You will be able to find an example

Here

But to be short:

<my-comp>
     <material-input icon="true" name="mUiInput" waves-color="#2f6975" label="Input with icon">
          <i class="material-icons">search</i>
     </material-input>
</my-comp>
<script>
    this.mUiInput.on('iconClick',function(e){
       console.log(e);
    });
</script>

[falxcerebri]

Okay, that's one way, but since we want to make riot clean, why not add iconClicked on inputs (since you have icon=true)

When I dug deeper into your code I thought maybe we could make something like this:

<material-input icon="true" waves-color="#2f6975" label="Icon input" iconClicked="...">
    <i class="material-icons">search</i>
</material-input>

I think it doesn't introduce much logic but perhaps some folks would find it useful.

Well, if you find that my idea isn't useful I'll use what you've provided.

[kysonic]

@falxcerebri

Why not?

I have made some fixes and now you can use your own custom handler for icon click.

Example

Or you can transmit it via attributes in your custom component:

<my-comp>
     <material-input icon="true" name="mUiInput" iconClicked="{click}" waves-color="#2f6975" label="Input with icon">
          <i class="material-icons">search</i>
     </material-input>
</my-comp>
<script>
    this.click = function(e){
       console.log('Custom handler',e);
    }
</script>