Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

touchhold event is firing multiple times despite not touching button that initiated method #97

Open
sts-ryan-holton opened this issue Oct 8, 2021 · 3 comments

Comments

@sts-ryan-holton
Copy link

I've got this library integrated into my Nuxt JS project. I'd like to create a "peek" function that, when a user long-presses a button then some functionality is triggered. I've created a function called peek and have attached it onto 3 buttons, passing some text through each function.

My buttons aren't initially shown, they're inside a v-if as part of a "FAB" that I've created.

When I open the FAB using the main button, my peek function is running 3 times, when it shouldn't be running at all, and is then running 6 times when I tap on a button that has the function, this should be running once.

What am I missing, my structure for my HTML is:

<div class="tw-flex tw-fixed tw-bottom-0 tw-mb-6 has-safe-area--padding-bottom" :class="$store.state.storage.app_settings.refreshButtonPlacement == 'left' ? 'tw-left-0 tw-ml-6' : 'tw-right-0 tw-mr-6'">
          <ul v-if="isFabOpen" class="tw-flex tw-items-center tw-space-x-3" :class="$store.state.storage.app_settings.refreshButtonPlacement == 'left' ? 'tw-ml-6 tw-order-1' : 'tw-mr-6'">
            <li>
              <nuxt-link v-touch:touchhold.self="peek('Edit Beam')" :to="`/account/beams/${id}/edit/`" class="tw-appearance-none tw-rounded-lg tw-w-11 tw-h-11 lg:tw-w-12 lg:tw-h-12 tw-font-semibold tw-text-md lg:tw-text-lg tw-flex tw-items-center tw-justify-center tw-outline-none focus:tw-ring-4 tw-text-white tw-shadow-sm tw-bg-secondary hover:tw-bg-secondary-lighten dark:tw-bg-gray-700 dark:hover:tw-bg-gray-800 focus:tw-ring-white/40 tw-mx-auto tw-rounded-full disabled:tw-opacity-50 disabled:tw-cursor-wait">
                <svg xmlns="http://www.w3.org/2000/svg" class="tw-h-4 tw-w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                </svg>
              </nuxt-link>
            </li>
            <li>
              <button v-touch:touchhold.self="peek('Fetch Beam')" :disabled="isRefreshingBeam" @click="requestBeamRefresh" type="button" class="tw-appearance-none tw-rounded-lg tw-w-11 tw-h-11 lg:tw-w-12 lg:tw-h-12 tw-font-semibold tw-text-md lg:tw-text-lg tw-flex tw-items-center tw-justify-center tw-outline-none focus:tw-ring-4 tw-text-white tw-shadow-sm tw-bg-secondary hover:tw-bg-secondary-lighten dark:tw-bg-gray-700 dark:hover:tw-bg-gray-800 focus:tw-ring-white/40 tw-mx-auto tw-rounded-full disabled:tw-opacity-50 disabled:tw-cursor-wait">
                <svg v-if="isRefreshingBeam" class="tw-animate-spin tw-my-auto tw-h-4 tw-w-4 tw-text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="tw-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="tw-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" class="tw-h-4 tw-w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
                </svg>
              </button>
            </li>
            <li>
              <button v-touch:touchhold.self="peek('Refresh Beam')" :disabled="isFetchingBeam" @click="fetchBeam" type="button" class="tw-appearance-none tw-rounded-lg tw-w-11 tw-h-11 lg:tw-w-12 lg:tw-h-12 tw-font-semibold tw-text-md lg:tw-text-lg tw-flex tw-items-center tw-justify-center tw-outline-none focus:tw-ring-4 tw-text-white tw-shadow-sm tw-bg-secondary hover:tw-bg-secondary-lighten dark:tw-bg-gray-700 dark:hover:tw-bg-gray-800 focus:tw-ring-white/40 tw-mx-auto tw-rounded-full disabled:tw-opacity-50 disabled:tw-cursor-wait">
                <svg v-if="isFetchingBeam" class="tw-animate-spin tw-my-auto tw-h-4 tw-w-4 tw-text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle class="tw-opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                  <path class="tw-opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                <svg v-else xmlns="http://www.w3.org/2000/svg" class="tw-h-4 tw-w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
                </svg>
              </button>
            </li>
          </ul>
          <button @click="isFabOpen = !isFabOpen" type="button" class="tw-appearance-none tw-rounded-lg tw-w-14 tw-h-14 lg:tw-w-16 lg:tw-h-16 tw-font-semibold tw-text-md lg:tw-text-lg tw-flex tw-items-center tw-justify-center tw-outline-none focus:tw-ring-4 tw-text-white tw-shadow-sm tw-bg-secondary hover:tw-bg-secondary-lighten dark:tw-bg-gray-700 dark:hover:tw-bg-gray-800 focus:tw-ring-white/40 tw-mx-auto tw-rounded-full disabled:tw-opacity-50 disabled:tw-cursor-wait">
            <div v-if="$store.state.storage.app_settings.refreshButtonPlacement == 'left'">
              <svg v-if="!isFabOpen" xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
            <div v-else>
              <svg v-if="!isFabOpen" xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" class="tw-h-5 tw-w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </div>
          </button>
        </div>

My function is:

/*
** Peek & Toast
*/
async peek (text = '') {
  if (text == '') return

  console.log('runs now')

  try {
    await this.$CapacitorHaptics.impact({ style: this.$CapacitorImpactStyle.Light })
  } catch (err) { }

  try {
    await this.$CapacitorToast.show({
      text: text
    })
  } catch (err) { }

},
@jerrybendy
Copy link
Owner

The parameter of v-touch must be a function. So that your peek method should return a function, not a Promise.

@adamxi
Copy link

adamxi commented Mar 1, 2022

I'm having a similar issue.
v-thouch:tap is actually firing on hover even though it's calling a plain function.

@jerrybendy
Copy link
Owner

@adamxi Could you paste your code here?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants