Very simple question I am having a hard time finding an answer for. How do I make an Image clickable...

# kobweb

[Garrett Coughlin]

Very simple question I am having a hard time finding an answer for. How do I make an Image clickable?

I have this code

Image(
    LibraryIconOptions.SEARCH.url,
    modifier = Modifier.onClick {
        console.log("Clicked")
    }
)

I expect there to be “Clicked” logged in the console when this is clicked on. But nothing happens. onClick works with other UI elements but not with the Image Composable.

[David Herman]

I'm working on my own project now and made an image clickable and it worked, exactly using onClick like you do, so not sure.

[David Herman]

If all you're doing is linking to another page, you can also wrap your image in an A tag

[David Herman]

In away from my computer but I'll share the code later today when I get back

[David Herman]

And just to make sure, LibraryIconOptions.SEARCH.url is the path to the image file?

[Garrett Coughlin]

yeah I thought this was the way to do it. I’m not linking to another page, but rather toggling a boolean state when the icon is clicked, so that another composable will render when that state is true

[Garrett Coughlin]

and yes, LibraryIconOptions.SEARCH.url is the path to the SVG file

[Garrett Coughlin]

thank you for the quick response btw 🙂

[David Herman]

You can also add Modifier.cursor(Cursor.Pointer) into the modifier chain. This won't make things clickable but it should be a visual indicator that is useful for verifying that a click should happen.

[David Herman]

You're quite welcome! The docs for Kobweb are still rough and examples, while growing thanks to users sharing their projects, are still limited. So I'm happy to help make sure getting up to speed with the framework is as pleasant as possible for people willing to work with it despite those limitations.

[Garrett Coughlin]

oh I see what you mean. I’ve applied the Modifier.cursor(Cursor.Pointer) to the Image and it does not have an effect. I applied the same cursor modifier to a SpanText, and it did show the visual effect. So I am thinking something is up with the Image Composable

[Garrett Coughlin]

Here is the code for the Image now

Image(
    LibraryIconOptions.SEARCH.url,
    modifier = Modifier
        .cursor(Cursor.Pointer)
        .onClick {
        console.log("Clicked")
    }
)

and then the simple span text

SpanText(
    "Search",
    modifier = Modifier.cursor(Cursor.Pointer)
)

The span text shows the modified cursor, the image does not

[Garrett Coughlin]

is there another composable I should be referencing for displaying icons?

[David Herman]

Can you inspect the image in your browser's dev tools?

[David Herman]

Maybe something weird is happening, like it thinks it's 0x0

[David Herman]

Could also be that some other invisible element is blocking it by being in front of it

[Garrett Coughlin]

yeah I manually set the width and height to make sure it’s not 0x0, here is the CSS from the browser.

whats weird is that the SpanText (which is in the same Composable and Row as the Search Icon) responds to click events and the cursor

[Garrett Coughlin]

so hard to say that something is blocking it.

I might try building out a custom Image Composable to see if we can get it working that way

[David Herman]

Why is pointer events set to none on img?

[David Herman]

I bet if you uncheck that line that things will work (until your page reloads again)

[David Herman]

Did you set that in an init silk block somewhere?

[Garrett Coughlin]

I’m not sure! But this did it

Why is pointer events set to none on img? -> I unchecked this box and now the callback function is working

[Garrett Coughlin]

I’ll have to check if this was set up somewhere in the app

[Garrett Coughlin]

Thank you David! Really appreciate you helping me out on the weekend no less. I should be able to figure it out from here

[David Herman]

In case you don't figure it out you can always set MousePointers(...) on your modifier I believe