[BUG] Drag gesture problem when selecting an input

[Aarbel]

Video

Screen.Recording.2022-08-23.at.21.48.26.mov

Code example

Codesandbox: https://codesandbox.io/s/framer-motion-drawer-forked-u6dzp4?file=/src/SideMenu.tsx

Fill the input with a text, and try to select the text inside with a mouse

Code

      <motion.div
        width={width}
        drag="x"
        dragElastic={0}
        dragConstraints={{
          left: -width,
          right: 0
        }}
        dragMomentum={false}
        onDragEnd={(_event, info) => {
          const isDraggingLeft = info.offset.x < 0;
          const multiplier = isDraggingLeft ? 1 / 4 : 2 / 3;
          const threshold = width * multiplier;

          if (Math.abs(info.point.x) > threshold && isActive) {
            setIsActive(false);
          } else if (Math.abs(info.point.x) < threshold && !isActive) {
            setIsActive(true);
          } else {
            constrols.start(isActive ? "active" : "inactive");
          }
        }}
        animate={constrols}
        variants={sidekickBodyStyles}
        transition={{ type: "spring", damping: 60, stiffness: 180 }}
      >
     ...

[Aarbel]

Just updated the description of the issue with codesandbox and video

[Aarbel]

@anthonyec @danillouz @eelco @koenbok @koenrh

Do you know a way to avoid this problem ?
Maybe disabling the drag when the input is focus.

Thanks a lot for your help