Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Regression (1.5.10-beta02): OutlinedTextField label is clipped on iOS #3737

Closed
brewin opened this issue Sep 27, 2023 · 2 comments · Fixed by JetBrains/compose-multiplatform-core#855
Assignees
Labels

Comments

@brewin
Copy link

brewin commented Sep 27, 2023

Describe the bug
The top of an OutlinedTextField label is clipped when used in an ExposedDropdownMenuBox on iOS. It is not clipped on Android. It was not clipped on iOS until a very recent version, maybe 1.5.10-beta01 or around there.

Affected platforms
Select one of the platforms below:

  • iOS

Versions

  • Kotlin version*: 1.9.20-Beta2
  • Compose Multiplatform version*: 1.5.10-beta02
  • OS version(s)* (required for Desktop and iOS issues): iOS 16, 17

To Reproduce

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun ExposedDropdownMenu3Sample() {
    val options = List(5) { "Item $it" }
    var expanded by remember { mutableStateOf(false) }
    var selectedOptionText by remember { mutableStateOf(options[0]) }
    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
    ) {
        OutlinedTextField(
            modifier = Modifier.menuAnchor(),
            readOnly = true,
            value = selectedOptionText,
            onValueChange = {},
            label = { Text("ExposedDropdownMenuBox3") },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            options.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(selectionOption) },
                    onClick = {
                        selectedOptionText = selectionOption
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}
@brewin brewin added bug Something isn't working submitted labels Sep 27, 2023
@eymar
Copy link
Collaborator

eymar commented Sep 28, 2023

Rerproduced with 1.5.10-beta02. No issue in 1.5.2.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun App() {
    Column {
        Spacer(modifier = Modifier.height(100.dp))
        OutlinedTextField(
            readOnly = true,
            value = "text",
            onValueChange = {},
            label = { Text("OutlinedTextField Label") },
        )
    }
}

1.5.2
Screenshot 2023-09-28 at 11 47 34

1.5.10-beta02
Screenshot 2023-09-28 at 11 45 06

@eymar eymar changed the title OutlinedTextField label clipped in ExposedDropdownMenuBox on iOS Regression: OutlinedTextField label clipped in ExposedDropdownMenuBox on iOS Sep 28, 2023
@eymar eymar added the ios label Sep 28, 2023
@eymar eymar changed the title Regression: OutlinedTextField label clipped in ExposedDropdownMenuBox on iOS Regression (1.5.10-beta02): OutlinedTextField label clipped in ExposedDropdownMenuBox on iOS Sep 28, 2023
@sdzshn3
Copy link

sdzshn3 commented Sep 28, 2023

I'm pretty sure I saw same kind of issue for OutlinedTextField without ExposedDropdownMenuBox too.
I'll try to replicate it again.

@eymar eymar changed the title Regression (1.5.10-beta02): OutlinedTextField label clipped in ExposedDropdownMenuBox on iOS Regression (1.5.10-beta02): OutlinedTextField label is clipped on iOS Sep 28, 2023
elijah-semyonov added a commit to JetBrains/compose-multiplatform-core that referenced this issue Sep 29, 2023
## Proposed Changes

Construct `OverscrollEffect` outside of `textFieldScrollable` and pass
it there to keep scroll behavior similar to iOS (the only platform
providing text field overscroll for now)
Use the `OverscrollEffect.effectModifier` (if any) for internal text and
not decoration box itself to avoid unintended clipping.

## Testing

Test: check that `OutlinedTextField` is not incorrectly clipped.
`OverscrollEffect` for large text fields still works correctly.

## Issues Fixed

Fixes: JetBrains/compose-multiplatform#3737

---------

Co-authored-by: dima.avdeev <dima.avdeev@jetbrains.com>
igordmn pushed a commit to JetBrains/compose-multiplatform-core that referenced this issue Nov 15, 2023
## Proposed Changes

Construct `OverscrollEffect` outside of `textFieldScrollable` and pass
it there to keep scroll behavior similar to iOS (the only platform
providing text field overscroll for now)
Use the `OverscrollEffect.effectModifier` (if any) for internal text and
not decoration box itself to avoid unintended clipping.

## Testing

Test: check that `OutlinedTextField` is not incorrectly clipped.
`OverscrollEffect` for large text fields still works correctly.

## Issues Fixed

Fixes: JetBrains/compose-multiplatform#3737

---------

Co-authored-by: dima.avdeev <dima.avdeev@jetbrains.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants