onPointerMove in React always fires and @pointermove in Vue fires only a few times

[dbzx10299]

I am converting a React component to a Vue component and there is something I cannot figure out, and that is why the pointermove event fires in React but in Vue it fires at most 20 times and stops.

I have a runnable example here and I have two projects set up there are 100% the same, one with Vite/React and one with Vite/Vue. The CSS is the same for both, and they both use touch-action: none the same.

In the console, the React component always logs 'pointer move', and in the Vue component it logs 'pointer move' a few times and stops.

Vue Component

<script setup>
import { Teleport, ref, onMounted } from 'vue'
import './Drawer/style.css'
</script>

<template>
  <div>
    <Teleport to="body">
      <div>
        <div className="fixed inset-0 bg-black/40" />
        <div
          data-vaul-drawer
         <!-- Only logs a few times and stops -->
          @pointermove="() => console.log('pointer move')"
          className="bg-gray-100 flex flex-col rounded-t-[10px] mt-24 h-[80%] lg:h-[320px] fixed bottom-0 left-0 right-0 outline-none"
        >
          <div className="p-4 bg-white rounded-t-[10px] flex-1 overflow-y-auto">
            <div className="max-w-md mx-auto space-y-4">
              <div aria-hidden className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
              <div className="font-medium mb-4 text-gray-900">Ira Glass on Taste</div>
              <p className="text-gray-600">
                Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work,
                we get into it because we have good taste.
              </p>
              <p className="text-gray-600">
                But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying
                to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is
                still killer. And your taste is why your work disappoints you. A lot of people never get past this
                phase, they quit.{' '}
              </p>
              <p className="text-gray-600">
                Most people I know who do interesting, creative work went through years of this. We know our work
                doesn’t have this special thing that we want it to have. We all go through this. And if you are just
                starting out or you are still in this phase, you gotta know its normal and the most important thing you
                can do is do a lot of work
              </p>
              <p className="text-gray-600">
                Put yourself on a deadline so that every week you will finish one story. It is only by going through a
                volume of work that you will close that gap, and your work will be as good as your ambitions. And I took
                longer to figure out how to do this than anyone I’ve ever met. It’s gonna take awhile. It’s normal to
                take awhile. You’ve just gotta fight your way through.
              </p>
            </div>
          </div>
        </div>
      </div>
    </Teleport>
  </div>
</template>

React Component

import './Drawer/style.css'
import { createPortal } from 'react-dom'

export default function TestDrawer() {
  return (
    <div>
      {createPortal(
        <div>
          <div className="fixed inset-0 bg-black/40" />
          <div
            data-vaul-drawer
           {/* always logs */}
            onPointerMove={() => console.log('pointer move')}
            className="bg-gray-100 flex flex-col rounded-t-[10px] mt-24 h-[80%] lg:h-[320px] fixed bottom-0 left-0 right-0 outline-none"
          >
            <div className="p-4 bg-white rounded-t-[10px] flex-1 overflow-y-auto">
              <div className="max-w-md mx-auto space-y-4">
                <div aria-hidden className="mx-auto w-12 h-1.5 flex-shrink-0 rounded-full bg-gray-300 mb-8" />
                <div className="font-medium mb-4 text-gray-900">Ira Glass on Taste</div>
                  <p className="text-gray-600">
                    Nobody tells this to people who are beginners, I wish someone told me. All of us who do creative work,
                    we get into it because we have good taste.
                  </p>
                  <p className="text-gray-600">
                    But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying
                    to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is
                    still killer. And your taste is why your work disappoints you. A lot of people never get past this
                    phase, they quit.{' '}
                  </p>
                  <p className="text-gray-600">
                    Most people I know who do interesting, creative work went through years of this. We know our work
                    doesn’t have this special thing that we want it to have. We all go through this. And if you are just
                    starting out or you are still in this phase, you gotta know its normal and the most important thing you
                    can do is do a lot of work
                  </p>
                  <p className="text-gray-600">
                    Put yourself on a deadline so that every week you will finish one story. It is only by going through a
                    volume of work that you will close that gap, and your work will be as good as your ambitions. And I took
                    longer to figure out how to do this than anyone I’ve ever met. It’s gonna take awhile. It’s normal to
                    take awhile. You’ve just gotta fight your way through.
                  </p>
              </div>
            </div>
          </div>
        </div>,
        document.body
    )}
    </div>
  );
}

[FragsterAt]

In which browser? In ff & chrome all is ok

[dbzx10299]

I just tested it, and it does seem to work better in Chrome than in Safari. It is still buggy though because when the scroll lock timeout finished when we swipe down in chrome it no longer follows the swipe but closes automatically. The original Radix UI Dialog <Overlay/> component is wrapped with react-remove-scroll and this also prevents this from happening.