Some scrolling issues when using on mobile

[cha2hyun]

Issue

When the select box position is at the bottom, it is difficult to scroll down or select items.

Some Idea

Check the position of selectbox and make it scroll down automatically or not

Select.tsx

import React, { useCallback, useEffect, useRef, useState } from 'react';

import { ChevronIcon, CloseIcon } from './Icons';
import Options from './Options';
import SearchInput from './SearchInput';
import SelectProvider from './SelectProvider';
import Spinner from './Spinner';
import { GroupOption, Option, Options as ListOption } from './type';
import { COLORS, DEFAULT_THEME, THEME_DATA } from '../constants';
import useOnClickOutside from '../hooks/use-onclick-outside';
....

  const scrollDown = () => {
    if (ref.current?.offsetTop) {
      if (
        ref.current.offsetWidth < 500 &&
        ref.current?.offsetTop / 2 >= window.scrollY
      ) {
        window.scrollTo({
          top: ref.current?.offsetTop / 2 + 180,
          behavior: 'smooth',
        });
      }
    }
  };

  return (
    <SelectProvider
      otherData={{
        formatGroupLabel,
        formatOptionLabel,
        classNames,
      }}
      value={value}
      handleValueChange={handleValueChange}
    >                                             👇👇👇👇👇
      <div className='relative w-full' ref={ref} onClick={scrollDown}>
               .......
      </div>
    </SelectProvider>
  );
};

export default Select;

[onesine]

Hi @cha2hyun 👋

I thank you for this idea. It would also be great to have this option. But, it would have to be an option that the user can enable or disable via an props. By default, this option can be enabled. Now, if the user doesn't want this behavior, they can disable it via an props.

This would be a very interesting PR. We are looking forward to it.

[SamX23]

Hi, may I know any update for this ?