JetBrains/compose-multiplatform v0.5.0-build228-web

Compose for Web 0.5.0-build228

on GitHub

The main topic of the 0.5.0-build228 web update is Input and its onInput {} event listener.

Although, it brings some breaking changes, they are rather minor and can be easily fixed. Let's have look:

Input doesn't have parameter value anymore:

If you need to use Input(...) and need to set value, then it's possible to do using attrs { value("string value") }

To help with the limitation mentioned above, we added a set of functions for different Input types.

Every function has a parameter attrsBuilder = {}, but it's omitted here for brevity.

• CheckboxInput(checked = true)
• DateInput(value = "2021-10-10")
• DateTimeLocalInput(value="1986-01-28T11:38:00.01") Have a look at Date and time formats
• EmailInput(value = "name@mail.com")
• FileInput(value = pathToFile)
• HiddenInput(attrsBuilder = {})
• MonthInput(value = "2017-06")
• NumberInput(value = 0, min = 0, max = 100)
• PasswordInput(value = password)
• RadioInput(checked = true)
• RangeInput(value = 0, min = 0, max = 100, step = 1)
• SearchInput(value = "search term")
• SubmitInput()
• TelInput(value = "0123456789")
• TextInput(value = "text")
• TimeInput(value = "12:20")
• UrlInput(value = "https://google.com")
• WeekInput(value = "2017-W01")

We updated onInput {} event handler.

• First of all, it uses a new type SyntheticInputEvent that provides value typed according to the InputType.
• SyntheticInputEvent also gives a direct access to the target: HTMLElement and nativeEvent: Event.
• Ideally one wouldn't need to use neither target nor nativeEvent directly, as SyntheticInputEvent has all properties and methods available in Web/API/Event. Please let us know if you need to use target or nativeEvent directly, as it will help us improve the API.

TextInput({
     onInput { syntheticInputEvent -> syntheticInputEvent.value } // value is of type 'String' for TextInput
})
CheckboxInput({
     onInput { syntheticInputEvent -> syntheticInputEvent.value } // value is of type 'Boolean' for CheckboxInput
})

Old event handlers for Input are deprecated:

Deprecated: onRangeInput, onRadioInput, onCheckboxInput, onTextInput
Replace by: onInput {} - it is sufficient to replace all of deprecated input event listeners

The weird thing about old event listener (onRangeInput, onRadioInput, etc.) is the fact they can be used in the Input of any InputType (it's obviously error prone). We recommend to migrate to onInput {} as soon as possible, as we plan to remove deprecated functions next release.

Moreover it was possible to use onInput, onRangeInput, onRadioInput, etc. in the attrs scope of any element. That's not the case anymore. onInput {} belongs to Input and TextArea elements, and they can be used only within their scopes now.

If you still need to handle input events on some containers or parent elements, then it's possible by setting an event listener manually as described in the tutorial Events handling in Compose Web If you do so, then please let us know about your use case. Your feedback is very useful and helps us improving the API.

Fixed issues:

• #765 - ClassCastException with native event when using autocomplete
• #635 - Web: DateInput onInput: Event is not InputEvent