dragBy: [".pane .draggable"] Not working

[primeKal]

Describe the bug Pane is not draggable by the dragging handle.

To Reproduce Steps to reproduce the behavior: Use this react component // components/MyComponent.tsx

import React, { ReactElement, useContext, useEffect } from "react"
import { useBottomSheet } from "./useBottomSheet"
import { CupertinoSettings } from "cupertino-pane"
import ModalStateContext from "../Map/context"

export interface SheetProps {
  children: ReactElement
  isDisplayed: boolean
  windowHeight: number
}

const BottomSheet = ({ children, isDisplayed, windowHeight }: SheetProps) => {
  const { state } = useContext(ModalStateContext)
  const settings: CupertinoSettings = {
    breaks: {
      top: { enabled: true, height: 400, bounce: false },
      middle: { enabled: true, height: 200, bounce: false },
      bottom: { enabled: true, height: 50, bounce: false },
    },
    topperOverflow: true,
    bottomClose: false,
    freeMode: true,
    buttonDestroy: false,
  }

  const { presentPane, hidePane } = useBottomSheet(
    ".cupertino-pane",
    settings,
    true,
  )
  useEffect(() => {
    if (isDisplayed) {
      presentPane()
    } else {
      hidePane()
    }
  }, [isDisplayed])

  return (
    <>
      <div className="cupertino-pane">
        {children}
      </div>
    </>
  )
}

export default BottomSheet

using this custome hook

// hooks/useCupertinoPane.ts
import { useContext, useEffect, useRef, useState } from "react"
import { CupertinoPane, CupertinoSettings } from "cupertino-pane"
import ModalStateContext from "../Map/context"

export const useBottomSheet = (
  selector: string,
  settings: CupertinoSettings,
  newPane: boolean = false,
) => {
  const paneRef = useRef<CupertinoPane | null>(null)
  const [showContent, setShowContent] = useState(false)
  const { state, dispatch } = useContext(ModalStateContext)

  useEffect(() => {
    if (!paneRef.current && newPane) {
      paneRef.current = new CupertinoPane(selector, {
        ...settings,
        parentElement: "body",
        dragBy: [".pane .draggable"],
        bottomClose: false, 
        events: {
          onDrag: (event) => {
            console.log("drag event")
            if (event.to === "bottom") {
              setShowContent(true)
            } else {
              setShowContent(false)
            }
          },
        },
      })
    }
    return () => {
      paneRef.current?.destroy()
    }
  }, [])

  const presentPane = async () => {
    await paneRef.current?.present({ animate: true })
  }
  const hidePane = async () => {
    console.log("in pane hider")
    paneRef.current?.destroy({ animate: true })
  }
  const updatePaneHeights = async () => {
    console.log("in updating heights")
    await paneRef.current?.updateScreenHeights()
    await paneRef.current?.setBreakpoints({
      top: { enabled: true, height: 800, bounce: false },
      middle: { enabled: true, height: 400, bounce: false },
      bottom: { enabled: true, height: 100, bounce: false },
    })
    await paneRef.current?.moveToBreak("bottom")
  }

  return { presentPane, hidePane, updatePaneHeights }
}

Simply use this component using any component

      <BottomSheet
        isDisplayed={isMobile}
        windowHeight={screenHeight}
      >
        {<div>Hiiii pane</div>}
      </BottomSheet>

Expected behavior To be dragged by the handle ONLY

Please help me here, any helpful comment is apricated

[primeKal]

"cupertino-pane": "^1.4.21",
    "react": "^18.2.0",

[roman-rr]

@primeKal Thank you for issue, I am also received your e-mail. Will check out in 1-2 days.

[primeKal]

Thank you.

[roman-rr]

@primeKal Let's go step-by-step to fix this issue. This is JavaScript playground, and here you might see usage of

{ 
  dragBy: [".pane .draggable"]
}

You can try to experiment and see that it's not a library issue; the JavaScript example works as expected. I'm not sure why the React version isn't working. I guess there is something overlapping the pane container.

To help me, please create and share a reproduction demo as a GitHub repository, or use an online sandbox such as JSFiddle.