JetBrains
CAMetalLayer ignoring invalid setDrawableSize error
Describe the bug I'm using ExposedDropdownMenuBox in Compose multi platform. It works fine in Android but somehow its not working on ios. I cannot see DropdownMenuItems but I can select something when I pretend its visible. Here is my code:
fun LanguageSpinner(
modifier: Modifier = Modifier,
placeholder: String,
selectedLanguage: Language,
languages: List<Language>,
isExpanded: Boolean,
onExpandChange: (Boolean) -> Unit,
onLanguageSelected: (Language) -> Unit,
) {
ExposedDropdownMenuBox(
modifier = modifier.background(Color.White),
expanded = isExpanded,
onExpandedChange = onExpandChange
) {
BasicTextField(
modifier = Modifier
.fillMaxWidth()
.menuAnchor(),
value = selectedLanguage.name,
onValueChange = {},
readOnly = true,
textStyle = appTypography.bodyMedium,
decorationBox = { innerTextField ->
TextFieldDefaults.DecorationBox(
value = selectedLanguage.name,
shape = CircleShape,
innerTextField = innerTextField,
enabled = true,
singleLine = true,
interactionSource = remember {
MutableInteractionSource()
},
visualTransformation = VisualTransformation.None,
placeholder = {
Text(
text = placeholder,
style = appTypography.bodyMedium,
color = textColor.copy(alpha = 0.5f)
)
},
trailingIcon = {
ExposedDropdownMenuDefaults.TrailingIcon(expanded = isExpanded)
},
colors = TextFieldDefaults.colors(
disabledTextColor = Color.Transparent,
focusedContainerColor = Color.White,
unfocusedContainerColor = Color.White,
disabledContainerColor = Color.White,
errorContainerColor = Color.White,
focusedIndicatorColor = Color.Transparent,
unfocusedIndicatorColor = Color.Transparent,
disabledIndicatorColor = Color.Transparent,
unfocusedPlaceholderColor = textColor.copy(alpha = 0.5f),
focusedPlaceholderColor = textColor.copy(alpha = 0.5f),
focusedTrailingIconColor = textColor.copy(alpha = 0.5f),
unfocusedTrailingIconColor = textColor.copy(alpha = 0.5f),
unfocusedLeadingIconColor = textColor.copy(alpha = 0.5f),
focusedLeadingIconColor = textColor.copy(alpha = 0.5f)
),
contentPadding = PaddingValues(
horizontal = LocalSpacing.current.spaceMedium,
vertical = LocalSpacing.current.spaceSmall
)
)
}
)
ExposedDropdownMenu(
modifier = Modifier.width(100.dp)
.background(Color.White)
.height(300.dp),
expanded = isExpanded,
onDismissRequest = {
onExpandChange.invoke(false)
}
) {
languages.forEach { language ->
DropdownMenuItem(
modifier = Modifier.background(Color.White),
text = {
Text(
text = language.name,
style = appTypography.bodyMedium,
color = textColor
)
},
onClick = {
onExpandChange.invoke(false)
onLanguageSelected.invoke(language)
}
)
}
}
}
}
Affected platforms
- iOS
Versions
- Libraries:
- Compose Multiplatform version: 1.6.10
- Navigation Multiplatform version (for related issues):
- ...
- Kotlin version: 1.9.23
- OS version(s) (required for Desktop and iOS issues): Sonoma 14.5
- OS architecture (x86 or arm64): arm64
- Device (model or simulator for iOS issues): iPhone 15 iOS 17.5
This is the expected behavior (Android screenshot)
And this is on iPhone https://github.com/JetBrains/compose-multiplatform/assets/33161529/b4ae2c6d-cc3d-4bc4-a050-553c71a82a2d
When I click dropdown component
Hello, @emirhanemmez! Could you please reproduce that behavior on a clean project from the template and attach it here?
Hello, @mazunin-v-jb I captured the bug. It actually happens when you give large list to dropdownmenu. I was trying to give large country list so I got this error. You can check from this repo. There are 2 spinner here. The one has large list, other one has short list. Only the spinner with large list is not working. It works on Android fyi.
Hello @elijah-semyonov , maybe it will help. When you describe DropdownMenuItem with LazyColumn not with forEach and give specific height and width to LazyColumn, it works on ios as well.
Old code:
ExposedDropdownMenu(
modifier = Modifier.width(100.dp)
.background(Color.White)
.height(300.dp),
expanded = isExpanded,
onDismissRequest = {
onExpandChange.invoke(false)
}
) {
languages.forEach { language ->
DropdownMenuItem(
modifier = Modifier.background(Color.White),
text = {
Text(
text = language,
)
},
onClick = {
onExpandChange.invoke(false)
onLanguageSelected.invoke(language)
}
)
}
}
New code:
ExposedDropdownMenu(
expanded = isExpanded,
onDismissRequest = {
onExpandChange.invoke(false)
}
) {
LazyColumn(
modifier = Modifier
.width(200.dp)
.height(300.dp)
) {
items(languages) { language ->
DropdownMenuItem(
modifier = Modifier.background(Color.White),
text = {
Text(
text = language.name,
style = appTypography.bodyMedium,
color = textColor
)
},
onClick = {
onExpandChange.invoke(false)
onLanguageSelected.invoke(language)
}
)
}
}
}
Please check the following ticket on YouTrack for follow-ups to this issue. GitHub issues will be closed in the coming weeks.
