I was hoisting this function so I doubt if this fu...

# compose-android

[Mahmoud Ali Yousuf]

I was hoisting this function so I doubt if this function is stateless now or if it still needs some improvement.

[Mahmoud Ali Yousuf]

@Composable
private fun MediaItemDropdownMenu(
     isExpanded: Boolean,
     onExpendedChange: (Boolean) -> Unit,
     options: List<String>,
     onDismissRequest: () -> Unit
 ) {
     var selectedOptionText by rememberSaveable { mutableStateOf("Select item") }
 
     ExposedDropdownMenuBox(
         expanded = isExpanded,
         onExpandedChange = onExpendedChange
     ) {
         OutlinedTextField(
             value = selectedOptionText,
             onValueChange = {},
             readOnly = true,
             label = { Text(text = selectedOptionText) },
             trailingIcon = {
                 ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
             },
             colors = ExposedDropdownMenuDefaults.textFieldColors(
                 focusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
                 unfocusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
                 containerColor = Transparent
             ),
             modifier = Modifier
                 .menuAnchor()
                 .fillMaxWidth()
         )
         ExposedDropdownMenu(
             expanded = isExpanded,
             onDismissRequest = onDismissRequest
         ) {
             options.forEach { option ->
                 DropdownMenuItem(
                     text = { Text(text = option) },
                     onClick = {
                         selectedOptionText = option
                         onExpendedChange(isExpanded)
                     },
                     contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding
                 )
             }
         }
     }
 }

[Stylianos Gakis]

If it contains a mutableStateOf, it is not stateless.
With that said, the decision to make something stateless or not depends on your use case, having something be stateful is not always guaranteed to be a bad thing.

[Mahmoud Ali Yousuf]

@Stylianos Gakis I tried to move selectedOptionText variable but since it's updated inside the DropdownMenuItem() I faced an issue and left it there. So is there a way it can be moved?

[Stylianos Gakis]

Sure, you can just hoist it as you would any other state, but again doing it just to do it isn’t always necessary, it really depends.
At least this one is better previewable now though.

@Composable
private fun OtherComposable(
  isExpanded: Boolean,
  onExpendedChange: (Boolean) -> Unit,
  options: List<String>,
  onDismissRequest: () -> Unit
) {
  var selectedOptionText by rememberSaveable { mutableStateOf("Select item") }
  MediaItemDropdownMenu(
    isExpanded = isExpanded,
    onExpendedChange = onExpendedChange,
    options = options,
    onDismissRequest = onDismissRequest,
    selectedOptionText = selectedOptionText,
    setSelectedOptionText = { selectedOptionText = it }
  )
}

@Composable
private fun MediaItemDropdownMenu(
  isExpanded: Boolean,
  onExpendedChange: (Boolean) -> Unit,
  options: List<String>,
  onDismissRequest: () -> Unit,
  selectedOptionText: String,
  setSelectedOptionText: (String) -> Unit,
) {
  ExposedDropdownMenuBox(
    expanded = isExpanded,
    onExpandedChange = onExpendedChange
  ) {
    OutlinedTextField(
      value = selectedOptionText,
      onValueChange = {},
      readOnly = true,
      label = { Text(text = selectedOptionText) },
      trailingIcon = {
        ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
      },
      colors = ExposedDropdownMenuDefaults.textFieldColors(
        focusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
        unfocusedIndicatorColor = MaterialTheme.colorScheme.outlineVariant,
        containerColor = Transparent
      ),
      modifier = Modifier
        .menuAnchor()
        .fillMaxWidth()
    )
    ExposedDropdownMenu(
      expanded = isExpanded,
      onDismissRequest = onDismissRequest
    ) {
      options.forEach { option ->
        DropdownMenuItem(
          text = { Text(text = option) },
          onClick = {
            setSelectedOptionText(option)
            onExpendedChange(isExpanded)
          },
          contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding
        )
      }
    }
  }
}

[Mahmoud Ali Yousuf]

@Stylianos Gakis didn't look at it from this perspective thanks. This will help me so much