The select tag example from official React-documentation gives a warning

Implemented “The select Tag” example from https://reactjs.org/docs/forms.html and get this warning:

Warning: The value prop supplied to select must be a scalar value if multiple is false.

I use 16.6.0-pre.61-kotlin-1.3.0: compile ‘org.jetbrains:kotlin-react:16.6.0-pre.61-kotlin-1.3.0’ compile ‘org.jetbrains:kotlin-react-dom:16.6.0-pre.61-kotlin-1.3.0’

import kotlinx.html.InputType
import kotlinx.html.js.*
import org.w3c.dom.HTMLSelectElement
import org.w3c.dom.events.Event
import react.*
import react.dom.*

interface SelectTestState : RState {
    var value: String
}

class SelectTest : RComponent<RProps, SelectTestState>() {
    override fun SelectTestState.init() {
        value = "coconut"
    }

    private fun handleChange(event: Event) {
        val target = event.target as HTMLSelectElement
        setState {
            value = target.value
        }
    }

    private fun handleSubmit(event: Event) {
        println("Your favorite flavor is: ${state.value}")
        event.preventDefault()
    }

    override fun RBuilder.render() {
        form {
            attrs.onSubmitFunction = {
                handleSubmit(it)
            }

            label {
                +"Pick your favorite flavor:"
                select {
                    attrs.value = state.value
                    attrs.onChangeFunction = {
                        handleChange(it)
                    }

                    option {
                        attrs.value = "grapefruit"
                        +"grapefruit"
                    }
                    option {
                        attrs.value = "lime"
                        +"lime"
                    }
                    option {
                        attrs.value = "coconut"
                        +"coconut"
                    }
                    option {
                        attrs.value = "mango"
                        +"mango"
                    }
                }
            }

            input {
                attrs.type = InputType.submit
                attrs.value = "Submit"
            }
        }
    }

}

fun RBuilder.selectTest() = child(SelectTest::class) {}

[weickmanna]

Same here. Problems seems to be the setter in RDOMBuilder that always converts the value into a set:

var SELECT.value: String
        get() = ""
        set(value) {
            values = setOf(value)
        }

[ncallaway]

I’m seeing the same thing with the following select:

select(classes = "form-control") {
    attrs { id = "mySelect"; this.name="mySelect"
        onChange = props.handleChange; onBlur = props.handleBlur; value = "B"
    }
    option { attrs { value = "A" }; +"Option A" }
    option { attrs { value = "B" }; +"Option B" }
    option { attrs { value = "C" }; +"Option C" }
    option { attrs { value = "D" }; +"Option D" }
    option { attrs { value = "E" }; +"Option E" }
}

I discovered this on version: org.jetbrains:kotlin-react:16.6.0-pre.62-kotlin-1.3.0 org.jetbrains:kotlin-react-dom:16.6.0-pre.62-kotlin-1.3.0

It is also reproing for me on the latest versions: org.jetbrains:kotlin-react:16.6.0-pre.69-kotlin-1.3.21 org.jetbrains:kotlin-react-dom:16.6.0-pre.69-kotlin-1.3.21