Some scrolling issues when using on mobile #19
Description
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;