How to Implement Infinite Scroll in Select with Offset Tolerance and Handle Dynamic Scroll Area Height in Mantine?

[kemaltf]

I'm working on implementing infinite scroll for a Select component (with a Combobox from Mantine), where new data should be loaded when the user scrolls to the bottom of the dropdown list. However, I'm facing the following issues:

onBottomReached is not being triggered correctly: When scrolling with a mouse wheel, the onBottomReached handler doesn't trigger as expected. It only works when I manually drag the scrollbar to the bottom. How can I fix this so the handler triggers when scrolling via mouse wheel as well?

Offset tolerance for bottom detection: I want to add some tolerance to the onBottomReached detection. Instead of triggering only when the scroll is at the very bottom, I'd like to trigger it when the user is a few pixels away from the bottom. This would help provide a smoother infinite scroll experience. How can I do this effectively?

Handling dynamic container height: The height of the dropdown (ScrollArea) may change dynamically depending on the content. However, I’m struggling to calculate the total scrollable height (scrollHeight) of the dropdown area after scrolling has occurred. I can get the height of the container (ScrollArea), but I can’t get the full scrollable height (i.e., including the scrolled content). How can I calculate this dynamically?

'use client';

import { useState } from 'react';
import { Box, Code, Combobox, ScrollArea, Text, TextInput, useCombobox } from '@mantine/core';

const groceries = [
  '🍎 Apples', '🍌 Bananas', '🥦 Broccoli', '🥕 Carrots', '🍫 Chocolate',
  '🍇 Grapes', '🍋 Lemon', '🥬 Lettuce', '🍄 Mushrooms', '🍊 Oranges',
  '🥔 Potatoes', '🍅 Tomatoes', '🥚 Eggs', '🥛 Milk', '🍞 Bread',
  '🍗 Chicken', '🍔 Hamburger', '🧀 Cheese', '🥩 Steak', '🍟 French Fries',
  '🍕 Pizza', '🥦 Cauliflower', '🥜 Peanuts', '🍦 Ice Cream', '🍯 Honey',
  '🥖 Baguette', '🍣 Sushi', '🥝 Kiwi', '🍓 Strawberries',
];

export function DropdownScrollArea() {
  const combobox = useCombobox({
    onDropdownClose: () => combobox.resetSelectedOption(),
  });

  const [value, setValue] = useState('');

  const shouldFilterOptions = !groceries.some((item) => item === value);
  const filteredOptions = shouldFilterOptions
    ? groceries.filter((item) => item.toLowerCase().includes(value.toLowerCase().trim()))
    : groceries;

  const options = filteredOptions.map((item) => (
    <Combobox.Option value={item} key={item}>
      {item}
    </Combobox.Option>
  ));

  return (
    <>
      <Combobox
        onOptionSubmit={(optionValue) => {
          setValue(optionValue);
          combobox.closeDropdown();
        }}
        store={combobox}
        withinPortal={false}
      >
        <Combobox.Target>
          <TextInput
            label="Pick value or type anything"
            placeholder="Pick value or type anything"
            value={value}
            onChange={(event) => {
              setValue(event.currentTarget.value);
              combobox.openDropdown();
              combobox.updateSelectedOptionIndex();
            }}
            onClick={() => combobox.openDropdown()}
            onFocus={() => combobox.openDropdown()}
            onBlur={() => combobox.closeDropdown()}
          />
        </Combobox.Target>

        <Combobox.Dropdown>
          <Combobox.Options>
            <ScrollArea
              h={200}
              onBottomReached={() => console.log('bottom')}
              onTopReached={() => console.log('first')}
              scrollbars="y"
            >
              <Box w={600}>
                {options.length === 0 ? <Combobox.Empty>Nothing found</Combobox.Empty> : options}
              </Box>
            </ScrollArea>
          </Combobox.Options>
        </Combobox.Dropdown>
      </Combobox>
    </>
  );
}

Key Problems:

• The onBottomReached doesn't trigger with mouse wheel scrolling, only with manual scrollbar dragging.
• I want to add an offset to the bottom detection to trigger it a few pixels before reaching the very bottom.
• I'm having trouble dynamically calculating the full scrollable height after scrolling because the height of the ScrollArea container changes.
• How can I implement these features effectively? Any help or suggestions would be greatly appreciated!

[kemaltf]

Solved guys!

Infinite scroll is a useful feature that allows for the seamless loading of data in a dropdown or list as the user scrolls down, rather than loading all the data upfront. This technique is especially helpful when dealing with large datasets or when wanting to improve the performance of an application by reducing initial loading times. In this article, we'll discuss how we can implement infinite scroll using Mantine's Combobox component, with a custom solution for triggering the onBottomReached event and handling dynamic heights.

Problem Statement
The task at hand is to implement infinite scroll in the Combobox dropdown of Mantine. There are three main problems we want to address:

Triggering onBottomReached on Mouse Wheel Scroll: The handler for detecting when the user reaches the bottom of the dropdown doesn't trigger when using the mouse wheel, it only triggers when manually dragging the scrollbar to the bottom.

Offset Tolerance for Bottom Detection: We want to trigger the infinite scroll action when the user is not exactly at the bottom of the dropdown but a few pixels above it. This provides a smoother and more intuitive experience.

Handling Dynamic Container Height: Since the height of the dropdown may change dynamically based on its content, we need to calculate the total scrollable height (scrollHeight) accurately, including the scrolled content.

Solution Overview
To address these challenges, we can leverage Mantine’s useIntersection hook along with a few custom tweaks to achieve the desired behavior.

1. Triggering onBottomReached on Mouse Wheel Scroll
   The key to solving the issue where the onBottomReached event doesn't trigger on mouse wheel scroll is to use the useIntersection hook effectively. This hook detects when an element enters or exits the viewport. By adjusting the threshold property, we can ensure that the infinite scroll logic triggers when the user is close enough to the bottom, even if they aren't using the scrollbar.

Code Snippet:

const { ref, entry } = useIntersection({
  root: containerRef.current,
  threshold: 0.9,  // Trigger when 90% of the container is visible
});

Full Code Implementation

import { useEffect, useRef, useState } from 'react';
import {
  Combobox,
  ComboboxOptionProps,
  ComboboxProps,
  Loader,
  TextInput,
  TextInputProps,
  useCombobox,
} from '@mantine/core';
import { useIntersection } from '@mantine/hooks';

interface Data {
  value: string;
  label: string;
}

interface InfiniteScrollSelectProps {
  data: Data[];
  loading?: boolean;
  onBottomReached?: () => void;
  onChange?: (value: string) => void;
  mah?: number | string;
  textInputProps?: TextInputProps;
  containerProps?: ComboboxProps;
  optionProps?: ComboboxOptionProps;
  checked?: boolean;
  defaultValue?: string;
  error?: string;
  onBlur?: () => void;
  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
  value?: string;
  children?: React.ReactNode; // Untuk custom dropdown
  searchable?: boolean; // Menambahkan props searchable
}

const InfiniteScrollSelect: React.FC<InfiniteScrollSelectProps> = ({
  data = [],
  loading = false,
  onBottomReached,
  onChange,
  mah = 200,
  textInputProps = {},
  containerProps = {},
  optionProps = {},
  checked,
  defaultValue,
  error,
  onBlur,
  onFocus,
  value,
  searchable = false, // Default tidak searchable
}) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const { ref, entry } = useIntersection({ root: containerRef.current, threshold: 1 });

  const combobox = useCombobox({
    onDropdownOpen: () => {},
    onDropdownClose: () => {},
  });

  const [selectedLabel, setSelectedLabel] = useState('');
  const [searchQuery, setSearchQuery] = useState(''); // State untuk pencarian

  // Filter data berdasarkan query pencarian
  const filteredData = searchable
    ? data.filter((item) => item.label.toLowerCase().includes(searchQuery.toLowerCase()))
    : data;

  useEffect(() => {
    const selectedItem = data.find((item) => item.value === value);
    setSelectedLabel(selectedItem ? selectedItem.label : '');
  }, [value, data]);

  useEffect(() => {
    if (entry?.isIntersecting && onBottomReached && !loading) {
      onBottomReached();
    }
  }, [entry, onBottomReached, loading]);

  return (
    <Combobox store={combobox} withinPortal={false} {...containerProps}>
      <Combobox.Target>
        <TextInput
          placeholder="Pilih opsi..."
          value={selectedLabel}
          defaultValue={defaultValue}
          error={error}
          checked={checked}
          onChange={(event) => {
            setSelectedLabel(event.currentTarget.value);
            if (searchable) {
              setSearchQuery(event.currentTarget.value); // Update search query saat mengetik
            }
          }}
          onClick={() => combobox.openDropdown()}
          onFocus={(event) => {
            combobox.openDropdown();
            onFocus?.(event);
          }}
          onBlur={() => {
            combobox.closeDropdown();
            onBlur?.();
          }}
          {...textInputProps}
        />
      </Combobox.Target>

      <Combobox.Dropdown mah={mah} ref={containerRef} style={{ overflowY: 'auto' }}>
        {filteredData.length > 0 ? (
          filteredData.map((item, index) => (
            <Combobox.Option
              key={`${item.value}-${index}`}
              onClick={() => {
                setSelectedLabel(item.label);
                onChange?.(item.value);
                combobox.closeDropdown(); // Menutup dropdown setelah memilih opsi
              }}
              {...optionProps}
              value={item.value}
            >
              {item.label}
            </Combobox.Option>
          ))
        ) : (
          <div style={{ padding: '10px', textAlign: 'center' }}>Tidak ada data</div>
        )}
        <div ref={ref} style={{ padding: '10px', textAlign: 'center', background: 'red' }}>
          {loading && <Loader size="sm" />}
        </div>
      </Combobox.Dropdown>
    </Combobox>
  );
};

export default InfiniteScrollSelect;

Feel free to integrate this approach into your project, and let us know how it works for you!