Fix *Select state sync on JS DOM via value-based selection (#81)

* Initial plan

* Fix *Select state sync on JS DOM by using value-based selection

- Pass value=textFieldArgs.valueComposeUi to MdFilledSelect/MdOutlinedSelect
  so Material Web uses value property setter (select(value)) to reliably
  set displayed selection from Compose state
- Remove selected attribute approach in SelectOption JS impl since
  selection is now controlled via the parent select's value attribute
- Add valueJsDom param to SelectOptionWithMaterialIcons
- Update demo SelectMenuContent to pass valueJsDom=it?.name?:'' so each
  option has a proper value matching the select element's value

Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com>

* Add valueJsDom param to FilledSelect/OutlinedSelect; use it instead of valueComposeUi

The valueComposeUi field in SelectTextFieldArgs is the Compose UI text-field
display string, while Material Web's value attribute is an HTML form key used
for programmatic option selection — semantically different.

- Select.kt: add valueJsDom: String to FilledSelect and OutlinedSelect
- Select.js.kt: use valueJsDom instead of textFieldArgs.valueComposeUi
- Select.composeUi.kt: accept valueJsDom param (suppressed; unused on this platform)
- Demo: pass value (selection?.name ?: "") as valueJsDom

Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com>

* Clarify valueJsDom vs valueComposeUi distinction in comments

Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com>

* Review all the changes in this PR and fix unindented changes

- Manually test and make `valueJsDom` not-null across all functions.
- Adjust the parameter order in `SelectOption`.

* Move inline comments to KDoc; move selection comment above commented-out selected line

Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com>

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: ShreckYe <27768951+ShreckYe@users.noreply.github.com>
Co-authored-by: Yongshun Ye <ShreckYe@gmail.com>

Author: Copilot

demo/src/commonMain/kotlin/com/huanshankeji/compose/material/demo/Material3.kt

@@ -202,17 +202,17 @@ fun Material3(/*modifier: Modifier = Modifier*/
             }
 
         @Composable
-        fun SelectMenuContent(selection: Selection?, setSelection: (Selection?) -> Unit, close: () -> Unit) =
+        fun SelectMenuContent(setSelection: (Selection?) -> Unit, close: () -> Unit) =
             (listOf(null) + Selection.entries).forEach {
                 SelectOptionWithMaterialIcons(
                     { modifier -> it?.let { Text(it.name, modifier) } },
                     {
                         setSelection(it)
                         close()
                     },
-                    it == selection,
+                    it?.name ?: "",
                     leadingIcon = Icons.Filled.Add,
-                    trailingIcon = Icons.Filled.Remove
+                    trailingIcon = Icons.Filled.Remove,
                 )
             }
 
@@ -245,14 +245,19 @@ fun Material3(/*modifier: Modifier = Modifier*/
                 )
             }
 
+            // `valueJsDom` doesn't necessarily need to be the same as `value`. See its KDoc for details.
+            val valueJsDom = selection?.name ?: ""
+            // an alternative using `ordinal`
+            //val valueJsDom = selection?.run { ordinal.toString() } ?: ""
             run {
                 val (expanded, setExpanded) = remember { mutableStateOf(false) }
                 val close = { setExpanded(false) }
                 FilledSelect(
                     expanded, setExpanded,
+                    valueJsDom,
                     textFieldArgs = SelectTextFieldArgs(value, label = label),
                     menuArgs = SelectMenuArgs(expanded, close, close) {
-                        SelectMenuContent(selection, setSelection, close)
+                        SelectMenuContent(setSelection, close)
                     }
                 )
             }
@@ -261,9 +266,10 @@ fun Material3(/*modifier: Modifier = Modifier*/
                 val close = { setExpanded(false) }
                 OutlinedSelect(
                     expanded, setExpanded,
+                    valueJsDom,
                     textFieldArgs = SelectTextFieldArgs(value, label = label),
                     menuArgs = SelectMenuArgs(expanded, close, close) {
-                        SelectMenuContent(selection, setSelection, close)
+                        SelectMenuContent(setSelection, close)
                     }
                 )
             }

material3/src/commonMain/kotlin/com/huanshankeji/compose/material3/ext/Select.kt

@@ -35,12 +35,13 @@ class SelectMenuArgs(
  * - On Compose UI: Uses [ExposedDropdownMenuBoxWithTextField] with a filled text field
  * - On JS: Uses native Material Web `MdFilledSelect` component
  *
- * @param value the currently selected value
- * @param onValueChange called when the selected value changes
  * @param modifier the [Modifier] to be applied to this select
- * @param enabled controls the enabled state of this select
- * @param label optional label for this select
- * @param options the options to display in the dropdown, typically [SelectOption] calls
+ * @param valueJsDom the HTML form key for the `md-filled-select` element, used internally to
+ *   identify which option is selected. By convention, it should be a code-like identifier string
+ *   (no spaces, e.g. `"OPTION_A"` or `"option_a"`), NOT a natural-language display string. This is
+ *   semantically different from [SelectTextFieldArgs.valueComposeUi], which is the text shown in
+ *   the text field (may contain spaces, e.g. `"Option A"`). Also, it can't be null — the
+ *   `md-filled-select` component doesn't react to a `null` value change on JS DOM.
  *
  * @see <a href="https://m3.material.io/components/menus/overview">Material Design select menus</a>
  *
@@ -51,15 +52,8 @@ class SelectMenuArgs(
 expect fun FilledSelect(
     expandedComposeUi: Boolean,
     onExpandedChangeComposeUi: (Boolean) -> Unit,
-    /*
-    These 2 params are temporarily not supported because their API style differ too much from Compose.
-    Also note that the `value` here comes from `MdFilledSelect` and serves as the key,
-    which differs from `value` in `ExposedDropdownMenuBoxTextFieldArgs` that serves as the text field value.
-    */
-    /*
     valueJsDom: String,
-    onValueChangeJsDom: (String) -> Unit,
-    */
+    //onValueChangeJsDom: (String) -> Unit,
     modifier: Modifier = Modifier,
     textFieldArgs: SelectTextFieldArgs,
     //scrollState: ScrollState = rememberScrollState(),
@@ -68,12 +62,16 @@ expect fun FilledSelect(
 
 /**
  * The outlined variant of [FilledSelect].
+ *
+ * @param valueJsDom see the `valueJsDom` parameter in [FilledSelect] for the semantics.
  */
 @ExperimentalApi
 @Composable
 expect fun OutlinedSelect(
     expandedComposeUi: Boolean,
     onExpandedChangeComposeUi: (Boolean) -> Unit,
+    valueJsDom: String,
+    //onValueChangeJsDom: (String) -> Unit,
     modifier: Modifier = Modifier,
     textFieldArgs: SelectTextFieldArgs,
     //scrollState: ScrollState = rememberScrollState(),
@@ -87,37 +85,43 @@ expect fun OutlinedSelect(
  *
  * @see DropdownMenuItem
  * @param text corresponds to the `headline` slot on JS DOM in Material Web.
- * @param valueJsDom the `value` attribute for an HTML form.
+ * @param valueJsDom the HTML form key `value` attribute. By convention this should be a code-like
+ *   identifier (no spaces), distinct from any natural-language display string.
+ *   Also see the `valueJsDom` parameter in [FilledSelect] and [OutlinedSelect],
+ *   which is used to identify the currently selected option.
  */
 @Composable
 expect fun SelectOption(
     text: @Composable (Modifier) -> Unit,
     onClick: () -> Unit,
-    selectedJsDom: Boolean,
+    // An alternative parameter to identify the currently selected option on JS DOM. This doesn't work properly when syncing states on JS DOM, however.
+    //selectedJsDom: Boolean,
+    valueJsDom: String,
     modifier: Modifier = Modifier,
     leadingIcon: @Composable ((Modifier) -> Unit)? = null,
     trailingIcon: @Composable ((Modifier) -> Unit)? = null,
     enabled: Boolean = true,
-    valueJsDom: String? = null,
-    //keepOpenJsDom: Boolean = false
+    //keepOpenJsDom: Boolean = false,
 )
 
 @Composable
 fun SelectOptionWithMaterialIcons(
     text: @Composable (Modifier) -> Unit,
     onClick: () -> Unit,
-    selectedJsDom: Boolean,
+    //selectedJsDom: Boolean,
+    valueJsDom: String,
     modifier: Modifier = Modifier,
     leadingIcon: Icon? = null,
     trailingIcon: Icon? = null,
-    enabled: Boolean = true
+    enabled: Boolean = true,
 ) =
     SelectOption(
         text,
         onClick,
-        selectedJsDom,
+        //selectedJsDom,
+        valueJsDom,
         modifier,
         leadingIcon.toNullableContentWithModifier(),
         trailingIcon.toNullableContentWithModifier(),
-        enabled
+        enabled,
     )

material3/src/composeUiMain/kotlin/com/huanshankeji/compose/material3/ext/Select.composeUi.kt

@@ -25,6 +25,7 @@ fun SelectMenuArgs.toComposeUiExposedDropdownMenuArgs() =
 actual fun FilledSelect(
     expandedComposeUi: Boolean,
     onExpandedChangeComposeUi: (Boolean) -> Unit,
+    @Suppress("UNUSED_PARAMETER") valueJsDom: String,
     modifier: Modifier,
     textFieldArgs: SelectTextFieldArgs,
     menuArgs: SelectMenuArgs
@@ -41,6 +42,7 @@ actual fun FilledSelect(
 actual fun OutlinedSelect(
     expandedComposeUi: Boolean,
     onExpandedChangeComposeUi: (Boolean) -> Unit,
+    @Suppress("UNUSED_PARAMETER") valueJsDom: String,
     modifier: Modifier,
     textFieldArgs: SelectTextFieldArgs,
     menuArgs: SelectMenuArgs
@@ -57,11 +59,11 @@ actual fun OutlinedSelect(
 actual fun SelectOption(
     text: @Composable ((Modifier) -> Unit),
     onClick: () -> Unit,
-    selectedJsDom: Boolean,
+    //selectedJsDom: Boolean,
+    valueJsDom: String,
     modifier: Modifier,
     leadingIcon: @Composable ((Modifier) -> Unit)?,
     trailingIcon: @Composable ((Modifier) -> Unit)?,
     enabled: Boolean,
-    valueJsDom: String?
 ) =
     CommonDropdownMenuItem(text, onClick, modifier, leadingIcon, trailingIcon, enabled)

material3/src/jsMain/kotlin/com/huanshankeji/compose/material3/ext/Select.js.kt

@@ -34,6 +34,7 @@ private fun mdSelectAttrs(
 actual fun FilledSelect(
     expandedComposeUi: Boolean,
     onExpandedChangeComposeUi: (Boolean) -> Unit,
+    valueJsDom: String,
     modifier: Modifier,
     textFieldArgs: SelectTextFieldArgs,
     menuArgs: SelectMenuArgs
@@ -43,6 +44,7 @@ actual fun FilledSelect(
         supportingText = textFieldArgs.supportingText,
         error = textFieldArgs.isError.isTrueOrNull(),
         disabled = textFieldArgs.enabled.isFalseOrNull(),
+        value = valueJsDom,
         clampMenuWidth = menuArgs.matchAnchorWidth,
         attrs = mdSelectAttrs(modifier, menuArgs)
     ) {
@@ -53,6 +55,7 @@ actual fun FilledSelect(
 actual fun OutlinedSelect(
     expandedComposeUi: Boolean,
     onExpandedChangeComposeUi: (Boolean) -> Unit,
+    valueJsDom: String,
     modifier: Modifier,
     textFieldArgs: SelectTextFieldArgs,
     menuArgs: SelectMenuArgs
@@ -62,6 +65,7 @@ actual fun OutlinedSelect(
         supportingText = textFieldArgs.supportingText,
         error = textFieldArgs.isError.isTrueOrNull(),
         disabled = textFieldArgs.enabled.isFalseOrNull(),
+        value = valueJsDom,
         attrs = mdSelectAttrs(modifier, menuArgs)
     ) {
         menuArgs.content()
@@ -75,18 +79,18 @@ actual fun OutlinedSelect(
 actual fun SelectOption(
     text: @Composable ((Modifier) -> Unit),
     onClick: () -> Unit,
-    selectedJsDom: Boolean,
+    //selectedJsDom: Boolean,
+    valueJsDom: String,
     modifier: Modifier,
     leadingIcon: @Composable ((Modifier) -> Unit)?,
     trailingIcon: @Composable ((Modifier) -> Unit)?,
     enabled: Boolean,
-    valueJsDom: String?
 ) =
     // copied and adapted from `DropdownMenuItem`
     MdSelectOption(
         enabled.isFalseOrNull(),
-        // `selected` has to be passed to update the selection from Compose data. This doesn't work properly now when syncing states, however.
-        selected = selectedJsDom.isTrueOrNull(),
+        // Selection is controlled via the `value` attribute on the parent select element, not via `selected` here.
+        //selected = selectedJsDom.isTrueOrNull(),
         value = valueJsDom,
         attrs = modifier.toAttrs {
             onClick { onClick() }