stevdza-san / KotlinBootstrap

Use the official Bootstrap UI components with Kotlin and Compose HTML, to build a frontend on the web.
167 stars 9 forks source link

BSInput component not triggering onValueChange when onEnterClick #19

Closed ZoranUTF8 closed 2 weeks ago

ZoranUTF8 commented 1 month ago

Code Explanation:

The handleInputChange function takes a String parameter newValue, which represents the new value of the input field.

Within handleInputChange, a message is printed to the console indicating that the value has changed, and then the newUserTicketAmount state is updated with the new value.

The BSInput component is a custom input component that allows users to input text. It has several attributes: value: This is set to newUserTicketAmount, which represents the current value of the input field which I get from the user state.

onValueChange: This callback scould be triggered when the input value changes. It calls the handleInputChange function with the new value.

required: This attribute indicates whether the input field is required.

floating: This attribute determines whether the input label should float above the input field when there is text in the field.

type: This specifies the type of input, in this case, it's set to InputType.Text.

modifier: This applies styling to the input field, such as setting its width and border.

onEnterClick: This callback is triggered when the Enter key is pressed while the input field is focused. It launches a coroutine scope to execute some asynchronous code.

Potential Issue:

The BSInput component seems to be correctly configured to update the newUserTicketAmount state via the onValueChange callback.

However, I am not seeing anything printed to the console when changing the value and I am unable to change the value/

fun handleInputChange(newValue: String) {
        println("Changed $newValue")
        newUserTicketAmount = newValue
        println("newUserTicketAmount $newUserTicketAmount")
    }
BSInput(
                    value = newUserTicketAmount,
                    size = InputSize.Small,
                    onValueChange = { newValue ->
                        handleInputChange(newValue)
                    },
                    required = true,
                    floating = false,
                    type = InputType.Text,
                    modifier = Modifier.width(160.px).border(
                        width = 2.px,
                        style = LineStyle.Solid,
                        color = Res.Theme.BACKGROUND_GREEN_DARK.color
                    ),
                    onEnterClick = {
                        coroutineScope.launch {
                            // some async code                        }
                    }
                )

But if I comment out the onEnterClick attribute as following it works:


BSInput(
    value = newUserTicketAmount,
    size = InputSize.Small,
    onValueChange = { newValue ->
        handleInputChange(newValue)
    },
    required = true,
    floating = false,
    type = InputType.Text,
    modifier = Modifier.width(160.px).border(
        width = 2.px,
        style = LineStyle.Solid,
        color = Res.Theme.BACKGROUND_GREEN_DARK.color
    ),
    // onEnterClick = {
    //     println("mnjau")
    //     coroutineScope.launch {
    //         // some async code         
    //     }
    // }
)
stevdza-san commented 2 weeks ago

Hey Zoran, thanks for your feedback, you're right. I'll take a look at that, and I'll leave this opened for the time being.

stevdza-san commented 2 weeks ago

Fixed with the new v0.1.3. Check it out. :)