onesine / react-tailwindcss-select

Tailwind Select Component for React.js
https://demo-react-tailwindcss-select.vercel.app/
MIT License
183 stars 38 forks source link

Some scrolling issues when using on mobile #19

Open cha2hyun opened 1 year ago

cha2hyun commented 1 year ago

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}

                                        ๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡๐Ÿ‘‡
.......

); };

export default Select;

onesine commented 1 year ago

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 commented 5 months ago

Hi, may I know any update for this ?