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

p-image-preview-indicator rendered when preview is false #14002

Closed
leykee opened this issue Nov 2, 2023 · 1 comment · Fixed by #14004
Closed

p-image-preview-indicator rendered when preview is false #14002

leykee opened this issue Nov 2, 2023 · 1 comment · Fixed by #14004
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@leykee
Copy link
Contributor

leykee commented Nov 2, 2023

Describe the bug

Image with preview: false show the p-image-preview-indicator, but should not.
When inspecting our page, that image indicator mask is covering the whole page, making it impossible to inspect any elements without deleting the dom node everytime.
I checked the code and this commit seems to have introduced the regression: 162d199

Environment

PrimeNG 16.6

Reproducer

No response

Angular version

16.2.0

PrimeNG version

16.6.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.17

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

@leykee leykee added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Nov 2, 2023
@francopan
Copy link

francopan commented Nov 7, 2023

I would also add that when the user clicks on the image when [preview]="true", it is adding "p-overflow-hidden" to body in order to show the preview. However, if you have a click event to redirect, when the user clicks the image, it will get redirected and the preview is not shown, which is correct, but the class is still applied.

Example below.

<div (click)="onClick()">
    <p-image [src]="src" [height]="height + 'px'" [width]="width + 'px'" [preview]="true">
    </p-image>
    <span>{{person.name}}</span>
</div>
@Component({
  selector: 'app-person-photo',
  templateUrl: './person-photo.component.html',
  styleUrls: ['./person-photo.component.scss'],
})
export class PersonPhotoComponent {
  ...
  public src: string | undefined;
  private _person: PersonCredit | Person | undefined;
  private _router = inject(Router);

  @Input() set person(person: PersonCredit | Person | undefined) {
    this._person = person;
    if (this._person?.profile_path) {
      this.src = `${api_url.image}/w${this.width}_and_h${this.height}_face/${this._person?.profile_path}`;
    }
  }

  public get person(): PersonCredit | Person | undefined {
    return this._person;
  }

  public onClick() {
    if (this._person) {
       this._router.navigate([`/person/${this._person.id}`]);
    }
  }
}

francopan pushed a commit to francopan/moviedb that referenced this issue Nov 7, 2023
@cetincakiroglu cetincakiroglu added this to the 16.8.0 milestone Nov 8, 2023
@cetincakiroglu cetincakiroglu added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Nov 8, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants