How to disable drag on a nested element

[federico-bellucci]

I'm creating a draggable modal and I'd like to make only the header draggable.

I've achieved it by canceling the drag event on nested elements:

const [style, api] = useSpring(() => ({
    ...initialPosition ?? { x: 0, y: 0 },
    config: springConfigs.stiff,
  }))

  const bind = useGesture({
    onDragStart: ({ cancel, target }) => {
      // Make only the modal-header draggable
      if (!(target as HTMLElement).closest('.modal-header')) {
        cancel()
      }
    },
    onDrag: ({ pinching, cancel, offset: [x, y] }) => {
      pinching && cancel()
      api.start({ x, y })
    },
    onDragEnd: ({ offset: [x, y] }) => {
      onDragFinished?.({ x, y })
    },
  }, {
    drag: {
      bounds: () => document.querySelector<HTMLElement>('.modal-overlay') ?? undefined,
      from:   () => [style.x.get(), style.y.get()],
    },
  })

The problem is that the dragstart handler is still executed and interfering with other mouse handlers.
Specifically, I have an input type="search" element and clicking the small x icon to clear the input (as seen on Chrome) won't work.

What's the best way to make only the modal header draggable?

Edit

Using the filterTaps option prevents the onDragStart handler from being called on input clear click, but the clearing still won't work.