Hey guys We are currently working with the horizontal pager

Question

Hey guys We are currently working with the horizontal pager from the accompanist library In our use case we are using 3 tabs all of them with only a text We notice this bug when clicked the center of the middle tab the click is not registered we also tried with more than 3 tabs but observed this same behavior every time we had an odd number of tabs always in the middle one If clicked outside this center everything works as expected TabRow and Tab are both from Material3 I will post some code in the thread thanks

Francisco Vital Serrão Pereira De Carvalho · Answer

Versions `accompanist = 0 29 1 alpha ` `androidxComposeMaterial3 = 1 1 0 alpha07 `

Francisco Vital Serrão Pereira De Carvalho · Answer

``` TabRow selectedTabIndex = pagerState currentPage pages forEachIndexed index name gt Tab modifier = Modifier nestedScroll scrollBehavior nestedScrollConnection selected = pagerState currentPage == index onClick = coroutineScopePager launch pagerState scrollToPage index text = Text text = stringResource id = name color = MaterialTheme colorScheme primary unselectedContentColor = MaterialTheme colorScheme onSurfaceVariant ```

Rebecca Franks · Answer

Have you tried using the androidx pager We will soon be deprecating the accompanist version I wonder if androidx pager is seeing the same issue slightly smiling face <https github com google accompanist pull 1504>

Guilherme Delgado · Answer

It s an odd behaviour The Tab and TabRow are from `material3` can the `accompanist pager` `androidx pager` influence their click behaviour thinking face

Guilherme Delgado · Answer

But nice to know it will be deprecated blush

Rebecca Franks · Answer

Is it that its not scrolling to the page or that the click event is not firing

Guilherme Delgado · Answer

click not firing

Guilherme Delgado · Answer

it s like the tab s touch area getting wrongly calculated instead of using the tab maxsize

Guilherme Delgado · Answer

< Rebecca Franks> hope it helps as you can see when we click on the center tab s text there s no click response

Rebecca Franks · Answer

Whats the reason for adding the nested scroll connection on the tab item

Guilherme Delgado · Answer

~nice catch~ thinking face ~< Francisco Vital Serrão Pereira De Carvalho> can you check this please ~ I did it wink

Rebecca Franks · Answer

FWIW tried similar with accompanist and pager both are working without that scroll connection wondering if that is somehow interfering with clicks Seems a bit strange that behaviour though

Guilherme Delgado · Answer

I ve commented the modifier but the same happens

Guilherme Delgado · Answer

I believe it was a copy paste error from this logic

Guilherme Delgado · Answer

```Scaffold modifier = Modifier nestedScroll scrollBehavior nestedScrollConnection ```

Guilherme Delgado · Answer

```Scaffold Column TabRow Tabs HorizontalPager```

Rebecca Franks · Answer

can you share the full composable

Guilherme Delgado · Answer

```val listState = rememberLazyListState val scrollState = rememberScrollState listState lastItemOffset val scrollBehavior = TopAppBarDefaults pinnedScrollBehavior rememberTopAppBarState Scaffold modifier = Modifier nestedScroll scrollBehavior nestedScrollConnection topBar = when pagerState currentPage 0 gt TopBarA 1 gt TopBarB 2 gt TopBarC Column Modifier fillMaxSize padding it TabRowTheme TabRow selectedTabIndex = pagerState currentPage pages forEachIndexed index name gt Tab selected = pagerState currentPage == index onClick = coroutineScopePager launch pagerState scrollToPage index text = Text text = stringResource id = name color = MaterialTheme colorScheme primary unselectedContentColor = MaterialTheme colorScheme onSurfaceVariant HorizontalPager modifier = Modifier fillMaxSize count = pages size state = pagerState userScrollEnabled = false page gt when page ```

Guilherme Delgado · Answer

Another sample with the touch box messed up

Guilherme Delgado · Answer

this sample is even stranger it seems only the word Notes don t react to touch

Rebecca Franks · Answer

Have you got another composable overlaying that section of the screen perhaps

Guilherme Delgado · Answer

could it be the pull to refresh thinking face

Rebecca Franks · Answer

Maybe

Guilherme Delgado · Answer

Well that s the area but the pull to refresh is a child from the pager items

Guilherme Delgado · Answer

could it be the z index messing it up

Guilherme Delgado · Answer

we didn t change the z index

Guilherme Delgado · Answer

Ok so yeah it s the pull to refresh

Guilherme Delgado · Answer

Screen Recording 2023 03 06 at 12 34 50 mov

Guilherme Delgado · Answer

how can we fix it now sweat smile

Rebecca Franks · Answer

Oh dear see no evil Is it in the page or the whole composable

Guilherme Delgado · Answer

in the pager items

Guilherme Delgado · Answer

```private fun Item pullRefreshStateTasks PullRefreshState Box Modifier pullRefresh pullRefreshStateTasks LazyColumn PullRefreshIndicator modifier = Modifier align Alignment TopCenter state = pullRefreshStateTasks contentColor = MaterialTheme colorScheme primary refreshing = false ```

Guilherme Delgado · Answer

each `HorizontalPager` item has it s own pull to refresh that will fire a different action on the VM state hoisting But if needed we could move that logic to the HorizontalPager level and react to the page selected in an UX perspective it will be the same you cannot change the page while loading

Rebecca Franks · Answer

Can you file a bug for this in the meantime I don t think the pull refresh component should be interfering with clicks when its not visible

Guilherme Delgado · Answer

yeah sure

Guilherme Delgado · Answer

google issue tracker or github can you provide link please slightly smiling face

Guilherme Delgado · Answer

so as a quick fix this works

Guilherme Delgado · Answer

```TabRow modifier = Modifier zIndex Float MAX VALUE ```

Guilherme Delgado · Answer

i ll file a bug

Rebecca Franks · Answer

Rebecca Franks · Answer

Thanks

Guilherme Delgado · Answer

Here it is <https issuetracker google com issues 271777421> slightly smiling face

Louis Pullen-Freilich [G] · Answer

Could you share some more of the code reproduction steps Does it only happen if you try and press a tab while the pull refresh is currently active

Rebecca Franks · Answer

I reproduced it with just adding the pull to refresh component inside a pager item without activating the pull to refresh you can t click on the middle item area i guess its regardless of what you put there

Louis Pullen-Freilich [G] · Answer

Only the middle item though confused

Louis Pullen-Freilich [G] · Answer

If you have that as a sample project you could add to the bug that would be helpful anyway

Rebecca Franks · Answer

yup that little section where the pull to refresh would appear

Rebecca Franks · Answer

sure will attach one to the bug too

Louis Pullen-Freilich [G] · Answer

Ahh ok thanks If you remove the `Modifier pullRefresh`but keep the indicator does it still have the same problem

Rebecca Franks · Answer

Yup I believe its the indicator

Guilherme Delgado · Answer

Guilherme Delgado · Answer

partying face