https://kotlinlang.org logo
#compose-web
Title
# compose-web
c

CLOVIS

09/22/2021, 8:14 PM
I'm starting out with Compose for Web, and I found this:
Copy code
@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?
Typing in the field doesn't trigger the event, however using chrome auto-complete does (with
it.value == "")
Ah, it's
onInput
, not
onChange
.
b

Big Chungus

09/22/2021, 8:56 PM
Yep, onChange is only to be used for uncontrolled input (where you don't set the value explicitly)
c

CLOVIS

09/23/2021, 7:19 AM
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.
b

Big Chungus

09/23/2021, 7:28 AM
This is general html behaviour
m

Michael Paus

09/23/2021, 8:40 AM
@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”.
b

Big Chungus

09/23/2021, 8:42 AM
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.
👍🏼 1
👍 1
It's similar to react in this sense
It doesn't use virtual dom for it, but instead have compiler implementing an observer pattern for us under the hood.
Also you'll find that it holds true for any js webui framework out there
m

Michael Paus

09/23/2021, 8:49 AM
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 😉
b

Big Chungus

09/23/2021, 8:50 AM
That's in the works with canvas based widget api that's fully MPP
👍 1
With that you gain further abstraction and reausability between web, android and desktop, but lose on accessability and bundle size.
c

CLOVIS

09/24/2021, 12:21 PM
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.
6 Views