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;