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

# compose-web

[CLOVIS]

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?

[CLOVIS]

Typing in the field doesn't trigger the event, however using chrome auto-complete does (with it.value == "")

[CLOVIS]

Ah, it's onInput, not onChange.

[Big Chungus]

Yep, onChange is only to be used for uncontrolled input (where you don't set the value explicitly)

[CLOVIS]

That sounds like something that should be in the documentation. TextInput only says that the value parameter allows to switch from one to the other, nothing about events.

[Big Chungus]

This is general html behaviour

[Michael Paus]

@Big Chungus Isn’t the point of using Kotlin and Compose not to need a strong html background? What do I know about “general html behaviour”.

[Big Chungus]

That's not 100% true. Compose-web composables mimic html elements and their API, because that's what's actually rendered under the hood. All compose gives us is ability to manage html tree in a declarative way and leaving up to compose to figure out what underlying html elements to actually update.

[Big Chungus]

It's similar to react in this sense

[Big Chungus]

It doesn't use virtual dom for it, but instead have compiler implementing an observer pattern for us under the hood.

[Big Chungus]

Also you'll find that it holds true for any js webui framework out there

[Michael Paus]

Then it may be just wishful thinking on my side that Kotlin/Compose would provide more abstraction from this html stuff than these usual js webui frameworks 😉

[Big Chungus]

That's in the works with canvas based widget api that's fully MPP

[Big Chungus]

With that you gain further abstraction and reausability between web, android and desktop, but lose on accessability and bundle size.

[CLOVIS]

I was confused on this one, because my previous project used React and they merged onChange and onInput into a single event, so I didn't know that normally they are separate. I agree though that the documentation should mention the difference.