Change theme
Help
Press space for more information.
Show links for this issue (Shortcut: i, l)
Copy issue ID
Previous Issue (Shortcut: k)
Next Issue (Shortcut: j)
Sign in to use full features.
Vote: I am impacted
Notification menu
Refresh (Shortcut: Shift+r)
Go home (Shortcut: u)
Pending code changes (auto-populated)
View issue level access limits(Press Alt + Right arrow for more information)
Unintended behavior
View staffing
Description
tvFoundation = "1.0.0-alpha12"
tvMaterial = "1.0.0"
Kotlin version: 2.0.0
When changing focus between pages, I've run into the problem of endless flipping between the original page and the one I want to go to. Here is the minimal code that allows me to reproduce this bug:
```
@Composable
fun TvHorizontalPager() {
val pageCount = 3
val pagerState = rememberPagerState(initialPage = 0) { pageCount }
val focusRequesters = remember { List(pageCount) { FocusRequester() } }
LaunchedEffect(Unit) {
Log.d("RECOMPOSE", "TvHorizontalPager: RECOMPOSE")
focusRequesters[0].requestFocus()
}
val onKeyEvent: (KeyEvent) -> Boolean = { event ->
if (event.type == KeyEventType.KeyDown) {
when (event.key) {
Key.DirectionLeft -> {
Log.d("KEY EVENT", "PAGER LEFT")
if (pagerState.currentPage > 0) {
val prevPageNumber = pagerState.currentPage - 1
focusRequesters[prevPageNumber].requestFocus()
}
true
}
Key.DirectionRight -> {
Log.d("KEY EVENT", "PAGER RIGHT")
if (pagerState.currentPage < pagerState.pageCount - 1) {
val nextPageNumber = pagerState.currentPage + 1
focusRequesters[nextPageNumber].requestFocus()
}
true
}
else -> false
}
} else {
false
}
}
HorizontalPager(
state = pagerState,
modifier = Modifier
.fillMaxSize()
.onPreviewKeyEvent(onKeyEvent),
pageSize = PageSize.Fixed(430.dp),
pageSpacing = 12.dp
) { page ->
when (page) {
0 -> {
var borderColor by remember { mutableStateOf(Color.Red) }
Box(
modifier = Modifier
.fillMaxSize()
.focusRequester(focusRequesters[page])
.onFocusChanged { focusState ->
borderColor = if (focusState.isFocused) Color.Green else Color.Red
}
.focusable()
.background(Color.DarkGray)
.border(
width = 5.dp,
color = borderColor
),
contentAlignment = Alignment.Center
) {
Text(
text = "A",
fontSize = 32.sp,
color = Color.White
)
}
}
1 -> {
var borderColor by remember { mutableStateOf(Color.Red) }
Box(
modifier = Modifier
.fillMaxSize()
.focusRequester(focusRequesters[page])
.onFocusChanged { focusState ->
borderColor = if (focusState.isFocused) Color.Green else Color.Red
}
.focusable()
.background(Color.DarkGray)
.border(
width = 5.dp,
color = borderColor
),
contentAlignment = Alignment.Center
) {
Text(
text = "B",
fontSize = 32.sp,
color = Color.White
)
}
}
2 -> {
var borderColor by remember { mutableStateOf(Color.Red) }
Box(
modifier = Modifier
.fillMaxSize()
.focusRequester(focusRequesters[page])
.onFocusChanged { focusState ->
borderColor = if (focusState.isFocused) Color.Green else Color.Red
}
.focusable()
.background(Color.DarkGray)
.border(
width = 5.dp,
color = borderColor
),
contentAlignment = Alignment.Center
) {
Text(
text = "C",
fontSize = 32.sp,
color = Color.White
)
}
}
}
}
}
```