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.

Sign up for GitHub

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

Jump to bottom

Vue | Popover issue: JavaScript Error When Clicking Popover Component Consecutively in onsenUI Versions 2.12.x and Above #3066

Closed
MaShangMing opened this issue Aug 10, 2023 · 3 comments · May be fixed by #3067
Closed

Vue | Popover issue: JavaScript Error When Clicking Popover Component Consecutively in onsenUI Versions 2.12.x and Above #3066

MaShangMing opened this issue Aug 10, 2023 · 3 comments · May be fixed by #3067
Labels
stale

Comments

@MaShangMing
Copy link

Hello guys！
Issue Description:

Steps to Reproduce:

Launch the application using onsenUI version 2.12.x or above.
Navigate to a screen containing a popover component.
Consecutively click on the popover component multiple times in quick succession.
Expected Result:

The popover component should function as expected without any errors, even when clicked rapidly.

Actual Result:

Upon rapid consecutive clicks on the popover component, a JavaScript error is triggered, leading to a malfunction or unexpected behavior.
Environment

[Core]
  onsenui latest
  
[Framework]
  vue 2.7.1

[Framework binding]
 vue-onsenui legacy

[Platform]
  Desktop - Windows 10 64-bit

[Browser]
  Desktop - Chrome 115.0.0.0 on Windows 10 64-bit

Encountered problem

How to reproduce

Demo link

  • HTML
<template id="main">
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">Popover</div>
      <div class="right">
        <v-ons-toolbar-button @click="showPopover($event, 'down', true)">
          <v-ons-icon v-if="$ons.platform.isAndroid()" icon="md-more-vert"></v-ons-icon>
          <span v-else> Click me </span>
        </v-ons-toolbar-button>
      </div>
    </v-ons-toolbar>

    <div style="height: 100%; display: flex; flex-direction: column">
      <div style="height: 100%; margin: 1em 0; display: flex; justify-content: space-around">
        <v-ons-button @click="showPopover($event, 'right')" style="align-self: flex-start">Click me</v-ons-button>
        <v-ons-button @click="showPopover($event, 'up')" style="align-self: center">Click me</v-ons-button>
        <v-ons-button @click="showPopover($event, 'left')" style="align-self: flex-end">Click me</v-ons-button>
      </div>
    </div>

    <v-ons-popover cancelable
      :visible.sync="popoverVisible"
      :target="popoverTarget"
      :direction="popoverDirection"
      :cover-target="coverTarget"
    >
      <p style="text-align: center">Lorem ipsum</p>
    </v-ons-popover>
  </v-ons-page>
</template>

<div id="app"></div>
  • JS
new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
      popoverVisible: false,
      popoverTarget: null,
      popoverDirection: 'up',
      coverTarget: false
    };
  },
  methods: {
    showPopover(event, direction, coverTarget = false) {
      this.popoverTarget = event;
      this.popoverDirection = direction;
      this.coverTarget = coverTarget;
      this.popoverVisible = true;
    }
  }
});
@FangyimingLode
Copy link

image getBoundingClientRect will cause the browser to reflow, you can add lodash debounce function for temporary solution image

@FangyimingLode FangyimingLode mentioned this issue Aug 18, 2023
Open
@github-actions GitHub Actions
Copy link

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

@github-actions github-actions bot added the stale label Nov 14, 2023
@github-actions GitHub Actions
Copy link

This issue was closed because it has been inactive for 7 days since being marked as stale. Please open a new issue if you believe you are encountering a related problem.

@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
stale
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: this.visible cause attributeChangedCallback to trigger multiple times FangyimingLode/OnsenUI
2 participants
@MaShangMing @FangyimingLode