EmojiPickerView not scrollable / categories aren't selectable in BottomSheetDialogFragment [301240745]

Assigned

Bug

Status Update

No update yet.

Description

jz...@tigerconnect.com

created issue #1

Sep 20, 2023 07:58PM

When trying to use androidx.emoji2.emojipicker.EmojiPickerView inside of a BottomSheetDialogFragment, if I use a ConstraintLayout, to wrap around it, the categories are selectable, however, the emojis are not scrollable. If I wrap it inside of a NestedScrollView, performance becomes janky, and the categories are not selectable.

Comments

jz...@tigerconnect.com <jz...@tigerconnect.com> #2Sep 20, 2023 08:45PM

This actually has nothing to do with NavHostFragment, but is the behavior of NavController's setGraph().

When you call navController.setGraph(R.navigation.navigation_graph), it stores that ID and will restore that ID automatically.

If you were to instead use:

NavInflater navInflater = new NavInflater(this, navController.getNavigatorProvider());
navController.setGraph(navInflater.inflate(R.navigation.navigation_graph));

Then NavController would not restore the graph itself and the call to restoreState() you point out would only restore the back stack state, etc. but would wait for you to call setGraph again.

You're right that the inconsistency between the two setGraph methods is concerning. We'll take a look.

wa...@google.com <wa...@google.com> Sep 20, 2023 09:23PM

Reassigned to li...@google.com.

gi...@gmail.com <gi...@gmail.com> #3Jan 1, 2024 10:28PM

Turns out, we already had a tracking bug for this issue, will follow up on that other one.

it...@gmail.com <it...@gmail.com> #4Feb 17, 2024 12:49AM

Thank you for promptly replying to my report. You are right that the issue you've just mentioned is similar to mine. I shall continue observing the progress over there.

it...@gmail.com <it...@gmail.com> #5Feb 17, 2024 01:02AM

Actually it seems as though the EmojiPicker only takes forever to inflate when in a Composable with that verticalScroll() modifier. When I remove this modifier, the view inflates right away (it's just not scrollable). So there's definitely some work to be done to detect the appropriate constraints for this embedded recycler view (again, why isn't this just a composable to begin with?!).

st...@gmail.com <st...@gmail.com> #6Feb 21, 2024 07:15AM

I'm also running into similar issues. I have it scrollable, but it takes forever to load the emoji picker. It would be great if it was a composable

gi...@gmail.com <gi...@gmail.com> #7Feb 28, 2024 03:56PM

Any news on this?

sa...@nextdoor.com <sa...@nextdoor.com> #8Apr 29, 2024 10:46PM

Was anyone able to figure this out?

jz...@tigerconnect.com <jz...@tigerconnect.com> #9Apr 30, 2024 06:12PM

override fun onCreateDialog(savedInstanceState: Bundle?): Dialog {
val bottomSheetDialog = super.onCreateDialog(savedInstanceState) as BottomSheetDialog
bottomSheetDialog.setOnShowListener {
val bottomSheet = bottomSheetDialog
.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)

if (bottomSheet != null) {
val behavior: BottomSheetBehavior<*> = BottomSheetBehavior.from(bottomSheet)
behavior.isDraggable = false
}
}
return bottomSheetDialog
}

sa...@nextdoor.com <sa...@nextdoor.com> #10May 2, 2024 07:42PM

Thanks! For anyone using this with compose. If you remove draggable from bottom sheet and also remove the `verticalScroll()`, then it works.

fa...@gmail.com <fa...@gmail.com> #11Nov 22, 2024 12:52PM

A working workaround for XMLs & View:

You need to turn nestedScrollingEnabled flag false on the RecyclerView with the id of R.id.emoji_picker_header after it has got laid out.

BottomSheetBehavior looks for the very first nested scrolling view within the findScrollingChild method of it, and the first one is the RecyclerView for the Header on the EmojiPickerView.

After you turn the flag off, BottomSheetBehavior will pick the second RecyclerView for the Body with the id of R.id.emoji_picker_body on which the main scrolling interaction happens.

The problem is BottomSheetBehavior has already picked the wrong one during the layout process.

For this reason you need to reinitialize BottomSheetBehavior.nestedScrollingChildRef property right after you turned the flag off. It is only possible with the public onLayoutChild method, since nestedScrollingChildRef doesn't has a setter.

emojiPickerView.doOnNextLayout {
    it.findViewById<RecyclerView>(androidx.emoji2.emojipicker.R.id.emoji_picker_header)
        ?.isNestedScrollingEnabled = false
    val coordinatorLayout = findViewById<CoordinatorLayout>(com.google.android.material.R.id.coordinator)
    val bottomSheet = findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
    if (coordinatorLayout != null && bottomSheet != null) {
        behavior.onLayoutChild(coordinatorLayout, bottomSheet, bottomSheet.layoutDirection)
    }    
}

Important, you need to wait for EmojiPickerView's layout end with emojiPickerView.doOnNextLayout { ... } extension function or the emojiPickerView.viewTreeObserver.addOnGlobalLayoutListener() method

Voilà