[UX] Allow a field HTML ID to be set as target in theme_token_tree_link()

[klonos]

This issue came up as I was testing the PR for #1439. Everything was working beautifully in the PR sandbox, but only if you are an experienced Drupal/Backdrop user, and you can thus anticipate certain quirks we have all gotten used to over the years...

After having clicked the "Browse available tokens" link and browsed through the tokens, when you click on a token to be used, you get this error/prompt:

I realize that in theory, the token browser can be used in any field in the same page (although it does not necessarily mean that the token set specified in a "Browse available tokens" link for one field can be used in other fields), but it is annoying to have clicked a link under a specific field, and then have this error message telling you to select a field.

If the field had focus prior to the token browser dialog being opened, then any token clicked on the dialog gets properly inserted into that field, without any error/prompt; but if the focus was elsewhere before clicking the link (such as the "enable" checkboxes in this case, which show/hide the image alt/title fields using #states), then you get this UX WTF.

Can we have it so that theme_token_tree_link() accepts a field ID as a parameter, so that once the "Browse available tokens" link is clicked, there's some JS triggered, which sets the focus to that field before opening the token browser?

[docwilmot]

I've got a strong feeling you've opened this issue before

[klonos]

The only somehow related one I could find @docwilmot was #3187 (was searching with "token" and "focus" as terms). Perhaps I am losing my touch and have started forgetting issues I have previously filed 😅 ...happy to close this as duplicate if we find that other issue.

[klonos]

...OK, you must be talking about #1497, but that was for a specific form/field. What I am aiming for here is for a generic way, to allow this functionality as part of theme_token_tree_link(), by specifying an ID (instead of having to add separate javascript for each field/form we have the same issue with) ...IOW, something that themers and module developers can easily implement and reuse.

So take the code bit here: https://github.com/serundeputy/backdrop/blob/1.x/core/modules/node/js/node.types.js#L117 ...move it into the System module, and make the ID selectors be variables which can be specified in theme_token_tree_link().

[quicksketch]

I took a stab at implementing something that might fit the bill here: backdrop/backdrop#3118

It does not actually allow a field's HTML ID to be targetted directly. Instead any token dialog link will automatically select the first field within a "form-item" wrapper. This works in the typical situation where the token link is placed within a form element's #description property.

If no field can be found (or if no previous field was given focus), it falls back to the previous behavior of showing an alert dialog to the user.

[herbdool]

I might have been doing it wrong, or its an issue with testing on a phone, but it didn't seem to work yet. I like where it's going though.

[indigoxela]

It's not only on a phone, I tested with Firefox and Chromium and it doesn't work with either.

I've been testing on these paths:

• admin/config/urls/path/patterns
• admin/structure/types/manage/post/fields/body

If I didn't click inside an input field before clicking the "browse tokens" link, I get the popup with "First click a text field into which...".

If I do click inside a different field, but scroll on and click on another (not nearest) token browser link, the token gets inserted into the previously clicked input field.