Viewpager unexpected behaviour with fragment detach/attach

Question

I have a framelayout in my main activity that I am pushing fragments into using fragment manager attach/detach, to keep the fragment state. Everything works fine, but in one of my fragments I have a viewpager that displays other fragments inside. When I first add this fragment to my framelayout using transaction 'add', It works just fine, but when I detach and reattach it, something weir happens, the content of the viewpager is not there, and when I slide between tabs, It gets stuck as in this picture https://ibb.co/jw7NswY

Here is my fragment onViewCreated :

@Override
public void onViewCreated(@NonNull final View view, @Nullable Bundle savedInstanceState) {
    super.onViewCreated(view, savedInstanceState);

    groupsViewModel = new ViewModelProvider(this).get(GroupsViewModel.class);

    //Setup groups pages
    viewPager = view.findViewById(R.id.view_pager_groups);
    viewPager.setOffscreenPageLimit(GROUPS_CATEGORIES_COUNT);
    viewPager.setAdapter(new GroupsPagerAdapter());

    TabLayout tabs = view.findViewById(R.id.tabs_groups);
    tabs.setupWithViewPager(viewPager);
    tabs.getTabAt(3).setIcon(R.drawable.ic_bookmarked);

    //Show/hide add group fab
    viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        @Override
        public void onPageSelected(int position) {
            showHideAddGroupFab(position);
        }

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });

}

and this is how i am navigating between fragments :

    private void moveToFragment(MenuItem fragmentNavItem) {
    //Get toFragment given its id
    int id = fragmentNavItem.getItemId();
    FragmentManager fragmentManager = getSupportFragmentManager();
    String tag = getFragmentTagFromItemId(id);
    Fragment toFragment = fragmentManager.findFragmentByTag(tag);

    FragmentTransaction transaction = fragmentManager.beginTransaction();

    transaction.detach(activeFragment);
    if (toFragment == null) {
        //We go to this fragment for the first time
        toFragment = createFragmentFromItemId(id);
        transaction.add(R.id.frame_layout_main, toFragment, tag);
    } else {
        //We have been in this fragment before
        transaction.attach(toFragment);
    }

    transaction.commit();

    activeFragment = toFragment;
    toolbar.setTitle(fragmentNavItem.getTitle());
}

Does anyone know why this happens ?

Answer 1

It seems to be a bug with viewpager, I migrated to viewpager2 and everything works just fine as documented here https://developer.android.com/training/animation/vp2-migration