fix(ConfirmPopup): set this.target to document.activeElement when this.target is empty #6591

KumJungMin · 2024-10-16T13:33:01Z

Defect Fixes

fix ConfirmPopup: Not positioned correctly when not used inside <button> #6525

How To Resolve

Cause

When the transition enter event occurs, this.target is updated to document.activeElement.
This logic is necessary when the target option is empty.

onEnter(el) {
    ...
    this.target = document.activeElement; // this is where it happens

    this.bindOutsideClickListener();
    this.bindScrollListener();
    this.bindResizeListener();

    ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);
}

However, even when the target option exists, this.target is still updated to document.activeElement.
If the triggered element is not an active element (e.g., a <p> or <i> tag), the popup position will be incorrect when it first opens.
For example, if the triggered element is an <i> (trash icon)tag, the popup’s this.target will be set to <body> on the first open, causing the position to be incorrect.(See the video example of the issue here)

problem.mov

Solution

To resolve this, I updated the logic to set this.target to document.activeElement only when this.target is empty.

// Before
this.target = document.activeElement;

// After
this.target = this.target || document.activeElement;

Test

When the <i> tag is clicked, the popup position is now correct the first time it opens.

2024-10-16.10.16.47.mov

sample code

<template>
  <ConfirmPopup></ConfirmPopup>
  <div class="card flex flex-wrap gap-6 justify-center items-center">
      <i @click="confirm1($event)" class="pi pi-trash"></i>
      <Button @click="confirm2($event)" label="Delete" severity="danger" outlined></Button>
  </div>
</template>

<script>
export default {
  methods: {
      confirm1(event) {
          this.$confirm.require({
              target: event.currentTarget,
              message: 'Are you sure you want to proceed?',
              icon: 'pi pi-exclamation-triangle',
              rejectProps: {
                  label: 'Cancel',
                  severity: 'secondary',
                  outlined: true
              },
              acceptProps: {
                  label: 'Save'
              },
              accept: () => {
                  this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
              },
              reject: () => {
                  this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
              }
          });
      },
      confirm2(event) {
          this.$confirm.require({
              target: event.currentTarget,
              message: 'Do you want to delete this record?',
              icon: 'pi pi-info-circle',
              rejectProps: {
                  label: 'Cancel',
                  severity: 'secondary',
                  outlined: true
              },
              acceptProps: {
                  label: 'Delete',
                  severity: 'danger'
              },
              accept: () => {
                  this.$toast.add({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted', life: 3000 });
              },
              reject: () => {
                  this.$toast.add({ severity: 'error', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
              }
          });
      }
  }
};
</script>

vercel · 2024-10-16T13:33:06Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Oct 16, 2024 1:33pm
primevue-v3	⬜️ Ignored (Inspect)	Visit Preview		Oct 16, 2024 1:33pm

fix: set this.target to document.activeElement when this.target is empty

2b195ff

tugcekucukoglu approved these changes Nov 13, 2024

View reviewed changes

tugcekucukoglu merged commit 2780f5a into primefaces:master Nov 13, 2024
5 checks passed

KumJungMin deleted the fix/issue-6525 branch November 15, 2024 02:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(ConfirmPopup): set this.target to document.activeElement when this.target is empty #6591

fix(ConfirmPopup): set this.target to document.activeElement when this.target is empty #6591

KumJungMin commented Oct 16, 2024 •

edited

Loading

vercel bot commented Oct 16, 2024 •

edited

Loading

fix(ConfirmPopup): set this.target to document.activeElement when this.target is empty #6591

fix(ConfirmPopup): set this.target to document.activeElement when this.target is empty #6591

Conversation

KumJungMin commented Oct 16, 2024 • edited Loading

Defect Fixes

How To Resolve

Cause

Solution

Test

vercel bot commented Oct 16, 2024 • edited Loading

KumJungMin commented Oct 16, 2024 •

edited

Loading

vercel bot commented Oct 16, 2024 •

edited

Loading