Pass Through: Set data-testid, etc. for input's DOM element, etc.

[ryoku4]

Describe the feature you would like to see added

My project uses PrimeReact and e2e testing (Cypress).
I would like to be able to set data-testid, data-cy, etc. using the "pass through (pt)"

<Password
  value={value}
  feedback={false}
  pt={{
    input: { "data-testid": "password-input" },
  }}
  onChange={(e) => setValue(e.target.value)}
/>

Is your feature request related to a problem?

Attempting to set the above will result a type error.

No overload matches this call.
Overload 1 of 2, '(props: PasswordProps | Readonly): Password', gave the following error.
Type '{ "data-testid": string; }' is not assignable to type 'PasswordPassThroughType<HTMLAttributes>'.
Object literal may only specify known properties, and '"data-testid"' does not exist in type 'HTMLAttributes | ((options?: PasswordPassThroughMethodOptions | undefined) => void | HTMLAttributes<...>)'.
Overload 2 of 2, '(props: PasswordProps, context: any): Password', gave the following error.
Type '{ "data-testid": string; }' is not assignable to type 'PasswordPassThroughType<HTMLAttributes>'.
Object literal may only specify known properties, and '"data-testid"' does not exist in type 'HTMLAttributes | ((options?: PasswordPassThroughMethodOptions | undefined) => void | HTMLAttributes<...>)'.ts(2769)

Describe the solution you'd like

I would like to be able to set data-testid, data-cy, etc. using the "pass through (pt)" without causing a type error

Describe alternatives you have considered

I tried to set data-testid in the "password component" like below, without using the "pass through (pt)", however it caused data-testid split into two elements (div and input).

Password Component

<Password
  value={value}
  feedback={false}
  data-testid="password-input"
  onChange={(e) => setValue(e.target.value)}
/>

div and input

<div
  class="p-password p-component p-inputwrapper"
  value=""
  data-testid="password-input"
  data-pc-name="password"
  data-pc-section="root"
>
  <input
    class="p-inputtext p-component p-password-input p-password-input"
    data-testid="password-input"
    type="password"
    data-pc-section="root"
    data-pc-name="inputtext"
    value=""
  />
</div>

Additional context

No response

[melloware]

Totally agree @ryoku4 let me look as I know how extremely important things like Cypress and Playwright testing can be.

[ryoku4]

Thank you for the quick response.