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

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.

@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?

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
        )
      }
    }
  }
}

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