Password: Incorrect onClick property as scope for custom icons

[service-paradis]

Describe the bug

You added support for custom icons in Primevue 3.27.0 which is really appreciated!

There is a bug using custom icons for the Password component. The onClick function sent as scope property is defined like this:

:onClick="() => onMaskToggle"

But it should be defined like this:

:onClick="onMaskToggle"

Right now, we have to call the function twice to make this work. Ex.

<template #showicon="{ onClick }">
  <FontAwesomeIcon :icon="['far', 'eye']" @click="onClick()()" />
</template>

Reproducer

https://codesandbox.io/s/billowing-worker-187lxo

PrimeVue version

3.27.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Version 1.50.114 Chromium: 112.0.5615.49 (Build officiel) (64 bits)

Steps to reproduce the behavior

1. Customize the icons for the Password component. Ex.

  <Password>
    <template #showicon="{ onClick }">
      <FontAwesomeIcon :icon="['far', 'eye']" @click="onClick()()" />
    </template>
    <template #hideicon="{ onClick }">
      <FontAwesomeIcon :icon="['far', 'eye-slash']" @click="onClick()()" />
    </template>
  </Password>

2. Take a look at how we need to call the received onClick event

Expected behavior

The onClick event sent as scope should be define as :onClick="onMaskToggle" in lib/password/Password.vue instead of :onClick="() => onMaskToggle". Right now, to make it works, we need to call it twice like @click="onClick()()" which is not desirable.