Мой раскрывающийся список не закрывается, когда я нажимаю за его пределами в предыдущем iOS - PullRequest
Новая
       4

Мой раскрывающийся список не закрывается, когда я нажимаю за его пределами в предыдущем iOS

1 голос
/ 10 марта 2020

Я работаю над раскрывающимся списком и хочу, чтобы он закрывался, когда я нажимал за его пределами То, что я сделал, работает на Chrome, на всех Android устройствах, которые я пробовал, и на всех iPhone на iOS 13, но не работает на старых устройствах. Я пытался сделать это по-разному, и ни один из них не работает ... Вот мой код, если кто-то хочет помочь! 

  const wrapperRef = useRef(null)
  const [scrollToggle, changeScrollToggle] = useState(false)
  const alteredPriceRange = [defaultValue].concat(priceRange)

  const slideToggle = () => {
    if (scrollToggle) {
      changeScrollToggle(false)
    } else {
      changeScrollToggle(true)
    }
  }

  const handleClickOutside = (e) => {
    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
      changeScrollToggle(false)
    } else {
    }
  }

  const optionSorter = (price) => {
    return price === 'min' || price === 'max' ? <>{`No ${price}`}</> : <><span>£</span> {price}</>
  }

  const selectedInput = () => {
    return currentValue === '' ? defaultValue : currentValue
  }

  useEffect(() => {
    const setHeight = slideRef => {
      if (scrollToggle) {
        slideRef.current.style.height = `${slideRef.current.firstChild.getBoundingClientRect().height}px`
      } else {
        slideRef.current.style.height = 0
      }
    }
    setHeight(slideRef)
  }, [scrollToggle])

  useEffect(() => {
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])

  return (
    <Fragment>
      <div ref={wrapperRef} className={`dropdown-wrapper ${scrollToggle ? 'dropdown-active' : ''}`}>
        <div
          id={`dropdown-selector-${idValue}`}
          className='dropdown-field'
          onClick={() => { slideToggle() }}
        >
          <p>
            <span className='currency'>£</span><span className='money'>
              {selectedInput()}
            </span>
          </p>
          <span className='caret'>
            <img src={caret} alt='caret' />
          </span>
        </div>
        <div className='scroll-content-wrapper'>
          <div className='scroll-block' ref={slideRef}>
            <Picklist className={'area'}>
              {alteredPriceRange.map((price, i) =>
                <div
                  id={`${idValue}-price-option-${i}`}
                  key={i}
                  onClick={(e) => {
                    selectClick(e, price, defaultValue)
                    slideToggle()
                  }}
                >
                  {optionSorter(price)}
                </div>
              )
              }

            </Picklist>
          </div>

        </div>
      </div>
    </Fragment>
  )
}

Спасибо

1 Ответ

1 голос
/ 11 марта 2020

Попробуйте использовать событие сенсорного запуска

Событие сенсорного запуска происходит, когда пользователь касается элемента.

Примечание. Событие сенсорного запуска будет работать только на устройствах с сенсорным экраном экран. 

  const handleClickOutside = (e) => {
    if (e.type === "touchstart") e.preventDefault();  // <- new line
    if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
      changeScrollToggle(false)
    } else {
    }
  }

  // ...

  useEffect(() => {
    document.addEventListener('touchstart', handleClickOutside)  // <- new line
    document.addEventListener('mousedown', handleClickOutside)
    return () => {
      document.removeEventListener('touchstart', handleClickOutside)  // <- new line
      document.removeEventListener('mousedown', handleClickOutside)
    }
  }, [])

ПРИМЕЧАНИЕ : этот код не проверялся!

...