https://kotlinlang.org logo
Channels
Powered by
#kobweb
Title
# kobweb
g

Garrett Coughlin

10/07/2023, 6:01 PM
Very simple question I am having a hard time finding an answer for. How do I make an Image clickable? I have this code
Copy 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.
d

David Herman

10/07/2023, 6:11 PM
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.
If all you're doing is linking to another page, you can also wrap your image in an A tag
In away from my computer but I'll share the code later today when I get back
🙌 1
And just to make sure, LibraryIconOptions.SEARCH.url is the path to the image file?
g

Garrett Coughlin

10/07/2023, 6:16 PM
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
and yes, LibraryIconOptions.SEARCH.url is the path to the SVG file
thank you for the quick response btw 🙂
d

David Herman

10/07/2023, 6:18 PM
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.
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.
g

Garrett Coughlin

10/07/2023, 6:29 PM
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
Here is the code for the Image now
Copy code
Image(
    LibraryIconOptions.SEARCH.url,
    modifier = Modifier
        .cursor(Cursor.Pointer)
        .onClick {
        console.log("Clicked")
    }
)
and then the simple span text
Copy code
SpanText(
    "Search",
    modifier = Modifier.cursor(Cursor.Pointer)
)
The span text shows the modified cursor, the image does not
is there another composable I should be referencing for displaying icons?
d

David Herman

10/07/2023, 6:32 PM
Can you inspect the image in your browser's dev tools?
Maybe something weird is happening, like it thinks it's 0x0
Could also be that some other invisible element is blocking it by being in front of it
g

Garrett Coughlin

10/07/2023, 6:52 PM
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
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
d

David Herman

10/07/2023, 6:52 PM
Why is pointer events set to none on img?
I bet if you uncheck that line that things will work (until your page reloads again)
🙌 1
Did you set that in an init silk block somewhere?
g

Garrett Coughlin

10/07/2023, 9:25 PM
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
I’ll have to check if this was set up somewhere in the app
Thank you David! Really appreciate you helping me out on the weekend no less. I should be able to figure it out from here
d

David Herman

10/07/2023, 10:22 PM
In case you don't figure it out you can always set MousePointers(...) on your modifier I believe
✅ 1
Powered by