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

AutoComplete: context option updates #7073

Closed
1 of 4 tasks
MystBug opened this issue Jan 10, 2025 · 2 comments
Closed
1 of 4 tasks

AutoComplete: context option updates #7073

MystBug opened this issue Jan 10, 2025 · 2 comments
Assignees
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@MystBug
Copy link

MystBug commented Jan 10, 2025

Describe the bug

When attempting to add dynamic data-attributes (such as data-testid) to children of components like AutoComplete or Dropdown (and potentially other components), it is only possible by using slot and slotProps. This requires extending the template with a slot, even for simple use cases like adding a test-id to a child component (e.g., AutoComplete's Option).

Pull Request Link

No response

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-4-vite-issue-template-mqr2pvyh?file=src%2FApp.vue

Environment

"nuxt": "^3.14.1592"

Vue version

3.5.13

PrimeVue version

4.2.4

Node version

22.4.1

Browser(s)

No response

Steps to reproduce the behavior

When using pt in a component like AutoComplete (or whichever component where you want to add attributes via pt), try to add it like:

    <AutoComplete
      :pt="{
        option: (optionProps) => ({
          'data-testid': `input-list-option-${optionProps.label}-${optionProps.value}`,
        }),
      }"
    />

If you add this you will see this as result in your DOM:

image

Because optionProps is of the AutoComplete instance and contains:

image

Which can not give anything focussed on the option

Expected behavior

It would be nice to have something like this pt for option (or any other component to be frank).

option: (options) => ({
  'data-testid': `input-list-option-${options.context.label}-${options.context.value}`,
}),

Or:

Provide the option index in the context so that you can manually extract the option information through something like: option.props.suggestions[options.context.index]

@MystBug MystBug added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jan 10, 2025
@tugcekucukoglu tugcekucukoglu changed the title Pass-through does not support dynamic data-attributes for child components AutoComplete: context option updates Jan 14, 2025
@tugcekucukoglu tugcekucukoglu self-assigned this Jan 14, 2025
@tugcekucukoglu tugcekucukoglu added this to the 4.3.0 milestone Jan 14, 2025
@github-project-automation github-project-automation bot moved this to Review in PrimeVue Jan 14, 2025
@tugcekucukoglu tugcekucukoglu added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jan 14, 2025
@tugcekucukoglu
Copy link
Member

Please try to use the latest version for child components. Also, context option will be update for the next version.

@github-project-automation github-project-automation bot moved this from Review to Done in PrimeVue Jan 14, 2025
@MystBug
Copy link
Author

MystBug commented Jan 14, 2025

Dropdown indeed has access to context.index (and properties of option) in ^4.2.5, yet Autocomplete does not support this yet

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
Status: Done
Development

No branches or pull requests

2 participants