craftcms / craftcms/cms

[4.x]: Impossible to attach click event listener to autosuggestField suggestions

Open
#14,633 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug craft4
Dominant language
PHP
Stars
3.6k
Forks
705
Avg merge
1d 5h
Merged PRs (30d)
134

Description

What happened?
Description

I'm building a custom plugin with autosuggestField.
With JS I would like to register when a user clicks one of the suggestions and when the inputfield is being filled in with the new value. Since there is no built in way to listen to this type of event I have created a global click event on the document.
But to my surprise this gets triggered everywhere in the document including the input field but not the suggestions which are basically list items.

I would like to do this because I want to prefill other fields with additional information related to the chosen suggestion of the autosuggestField.

Steps to reproduce
  1. Use autosuggestField in a custom plugin
  2. Try to trigger a JS event to know what suggestion has been chosen
Expected behavior

I would like to at least know when a user clicks one of the suggestions.

Actual behavior

Nothing happens.
The event is not being triggered.
I assume it is being blocked by internal functions.

Craft CMS version

4.8.3

PHP version

8.1

Operating system and version

MacOS sonoma

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the issue with autosuggestField in a custom plugin and inspect how its suggestions handle clicks and input updates. The work is done when a plugin can reliably detect which suggestion was chosen and respond to the new field value.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.