Did anyone have issues with "onClick" not working on iOS (Safari) devices? iOS users are saying that clicking doesn't do anything, but it works fine under Firefox or Chrome

Hello, what are you guys using for language localization?

Interesting: @olonho doing important work making Skiko multiplatform (enabling compose canvas rendering on web + iOS) https://github.com/JetBrains/skiko/pull/150

What does the "Wt" mean?

Is it necessary to rerun the project everytime I want to test? Os is there a way to auto-reload?

How to add a video to a webpage?

Hi, in a Row I have two boxes, is there a way to set the second box to the right side of the screen while keeping the first in the left side ?

Are

compose.foundation

and

compose.material

not available yet for JS? Gradle refuses to build if I put them in

commonMain

, saying the JS IR variants are missing.

Taking a look at the

compose.web.widgets

source code, it is very bare at the moment (a few types of buttons/text, but no TextField etc). At the moment, is the recommended way to write multiplatform UIs? Is it to stick with it and expect-actual what it doesn't have, or completely ignore it?

Has anyone tried using Google One-tap sign in with compose web? ( https://developers.google.com/identity/gsi/web/guides/handle-credential-responses-js-functions ) What I want specifically is a button that calls a local function upon obtaining credentials, but no matter what I pass to

data-callback

, it errors saying that it isn't a function

Are there plans to port Google's material design components to the web at some point? I understand some of them work for desktop already?

Is there a reason why the test-utils module isn't available in WebDependencies?

Does Compose for Web have an interoperability story that's as compelling as Compose for Android i.e can I leverage Compose for Web in an existing React website? If yes, any examples I can check? I think incremental adoption would be super powerful and I have a feeling that its most likely supported or at least on the roadmap?

Hello people! I’ll go straight to the point 😄 I use the following code for CSS variables.

object BoardCssVariable {
    val translateOrigin by variable<StylePropertyString>()
}

The current examples are use it in something like

object BoardSheet : StyleSheet() {
    val container by style {
        BoardCssVariable.translateOrigin("translateY(-150%)")
        property("transform", BoardCssVariable.translateOrigin.value())
    }
}

But that’s not really useful. I want to change its value depending on some logic. So I ended up doing

Div({
    style {
        if (myCondition) {
          property(BoardCssVariable.translateOrigin.name, "translateY(-150%)")
        }
    }
}) {}

Is there some ideas to make it more pleasant? Maybe Compose for web could get some handy features via the compiler, some kind of CSS runtime like Emotion? Of course, it is not blocking. Just curious to know what will be the team’s take on that 🙂 Maybe I could have done something like

Div({
    classes(BoardSheet.container("translateY(-150%)"))
}) {}

and under the wood, the compiler would have done what I manually did. I don’t know 🤷

Are there any sample compose-web project with a server-side component? Can a compose-web application be served from a ktor-instance that also handles incoming REST calls for instance? Most examples I found were "client-only" 🙂

Hey, when i updated to alpha4-build348 i started getting the following error: https://pastebin.com/rgfings1 Anybody getting this issue or have any idea on how to solve it? the cause seems to be this state

val (modalState, setModalState) = remember { mutableStateOf<(@Composable () -> Unit)>({ loading() }) }

does tailwind work with compose web? I saw this https://github.com/nanodeath/kotlinjs-tailwindcss but I'm not sure how applicable it is to compose

I'm starting out with Compose for Web, and I found this:

@Composable
fun App() {
  var email by remember { mutableStateOf ("") }

  TextInput(email) {
    onChange { email = it.value }
  }
}

However,

it.value

is always an empty string. Am I doing something obviously wrong (like calling the wrong function), or is my problem more complicated?

Hey guys, Is there an equivalent to React keys (https://reactjs.org/docs/lists-and-keys.html#keys) to ensure that, in a list, the same element is always rendered using the same dome node, even if elements are added or removed ? This is important for CSS animations.

How to export a compose web project to execute it outside a gradle environment? I want to host my compose website, but I couldn't find how to do it. Could you point me to the documentation?

Do you guys face this? If you pay attention you'll see that on all margins there's a small white 'padding', although I didn't configure any spacing on the sides. Is it possible to disable this? Or is this just the standard? (Backender Kotliner trying to play with frontend a bit 😅 )

With a controlled TextInput on version 1.0.0-alpha4-build348, I am seeing the following behavior: every time a character is entered, the text cursor moves to the right of the entire text string that is in the control. Has anyone else observed this or am I doing something wrong? I essentially followed the example in the release notes to build 321, trying with both an Input and a TextInput.

Hey guys! Due to my earlier post I created this SO question and answer I want to discuss this. As a new frontend developer this issue was a bit strange for me. I've had attempts with Vue and React, and I don't remember having an issue with this default margin. On our landing page the margin is removed, but I don't see this mentioned anywhere else. Should this 0 margin be the default for compose?

Is it possible to render <svg> tag with compose-web? Autocomplete does not give any

Svg(...)

composable

Is it possible to understand what triggered recomposition ? I have 2 compositions in sequence and I'd like to understand why.

This message was deleted.

Is it possible to set a boolean html attribute (not property) with compose? attr("name", true.unsafeCast<String>()) sets it as name="", whereas it should set it as just name with no empty string value.

Any news on web-core builds? https://kotlinlang.slack.com/archives/C01D6HTPATV/p1632781381376800?thread_ts=1632772852.373600&amp;cid=C01D6HTPATV

Hi all, I have a compose multi platform project (android, desktop, browser, iOS). In my shared module, if I declare the JS target as

js(BOTH)

things work fine and my

js(IR)

based frontend modules can consume the shared artefacts just fine. If I declare the JS target as

js(IR)

in the shared module I get the following exception:

> Task :shared:compileKotlinJs
exception: java.lang.IllegalStateException: Cannot find the Composer class in the classpath
	at androidx.compose.compiler.plugins.kotlin.lower.AbstractComposeLowering.<init>(AbstractComposeLowering.kt:195)