Add option to mock a dropdown for keywordPickers

[tylerjmchugh]

Currently keywordPicker fields do not give any indication that the field has suggested values. This is an issue for new users as the field appears as a plain text field. When a keywordPicker field is validated against its suggested values it is unclear to the user how to see all the options.

This PR aims to fix this issue by introducing an optional attribute on the keywordPicker which will add styles to make the field appear like a dropdown list / HTML5 datalist by adding the caret icon.

Seeing the caret icon will prompt the user to click on the field to see the available options.

When combined with the data-show-hints-on-focus="true" attribute introduced in #7227 when the field is clicked the whole list of hints is shown regardless of the current input which makes it much more clear to the user what the accepted values are.

Checklist

• [X] I have read the contribution guidelines
• [X] Pull request provided for main branch, backports managed with label
• [X] Good housekeeping of code, cleaning up comments, tests, and documentation
• [X] Clean commit history broken into understandable chucks, avoiding big commits with hundreds of files, cautious of reformatting and whitespace changes
• [X] Clean commit messages, longer verbose messages are encouraged
• [ ] API Changes are identified in commit messages
• [ ] Testing provided for features or enhancements using automatic tests
• [ ] User documentation provided for new features or enhancements in manual
• [ ] Build documentation provided for development instructions in README.md files
• [ ] Library management using pom.xml dependency management. Update build documentation with intended library use and library tutorials or documentation

[ianwallen]

@josegar74 Do you think it would be better if we always apply it to all data-gn-keyword-picker It is just adding an arrow to make it clear that it is a keywork picker so I believe it I would expect it to be applied to all of them so that it is consistent for all keyword pickers? What are your thoughts?

[josegar74]

@ianwallen with the data-show-hints-on-focus=‘true’ mode it makes sense to show the dropdown icon, so perhaps we can simplify the pull request and add it automatically in this mode, removing the data-mock-dropdown property.

Without the data-show-hints-on-focus=‘true’ the main problem is that it can be confusing to click on the control and not show any value, unless the control is empty.

[tylerjmchugh]

@ianwallen with the data-show-hints-on-focus=‘true’ mode it makes sense to show the dropdown icon, so perhaps we can simplify the pull request and add it automatically in this mode, removing the data-mock-dropdown property.

Without the data-show-hints-on-focus=‘true’ the main problem is that it can be confusing to click on the control and not show any value, unless the control is empty.

@josegar74 I agree that it makes more sense to always use them together to avoid the case where no results are shown when clicking.

My latest push removes the new data-mock-dropdown property and adds the class when data-show-hints-on-focus is set instead.

[tylerjmchugh]

Fields using data-gn-directory-entry-selector / multientrycombiner have no way of adding the data-show-hints-on-focus attribute.

My next commit will implement a way of specifying this is the layout-custom-fields config json.

[tylerjmchugh]

I also noticed data-gn-language-picker behaves similarly. What changes need to be made so that data-gn-language-picker can accept directive attributes?

Are there any other directives that behave similarly to the keywordPicker that should be updated?

[tylerjmchugh]

Other than multientrycombiner (which uses a gn-keyword-picker) I was only able to identify the gn-language-picker directive as requiring the show-hints-on-focus option. All the other fields with typeahead do not resemble a regular text input so they should not be problematic.

My latest push updates the gn-language-picker to support show-hints-on-focus.

[geonetworkbuild]

The backport to 4.2.x failed:

The process '/usr/bin/git' failed with exit code 1

stderr

``` The previous cherry-pick is now empty, possibly due to conflict resolution. If you wish to commit it anyway, use: git commit --allow-empty Otherwise, please use 'git cherry-pick --skip' ```

stdout

``` Auto-merging web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js [backport-8401-to-4.2.x edaef96a74] Implement attribute for mock dropdown Author: tylerjmchugh Date: Thu Oct 3 13:47:59 2024 -0400 1 file changed, 5 insertions(+) Auto-merging web-ui/src/main/resources/catalog/views/default/less/gn_editor_default.less [backport-8401-to-4.2.x 3972d58d82] Implement styles for mock dropdown Author: tylerjmchugh Date: Thu Oct 3 13:48:08 2024 -0400 1 file changed, 17 insertions(+) Auto-merging web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js [backport-8401-to-4.2.x 7eaff418cc] Documentation Author: tylerjmchugh Date: Thu Oct 3 13:51:47 2024 -0400 1 file changed, 3 insertions(+), 2 deletions(-) Auto-merging web-ui/src/main/resources/catalog/components/thesaurus/ThesaurusDirective.js [backport-8401-to-4.2.x 5b8ef5e6d4] Modify directive to enable mock dropdown by default when showHintsOnFocus is enabled Author: tylerjmchugh Date: Tue Oct 8 10:33:34 2024 -0400 1 file changed, 3 insertions(+), 4 deletions(-) On branch backport-8401-to-4.2.x You are currently cherry-picking commit 17b09560e0. (all conflicts fixed: run "git cherry-pick --continue") (use "git cherry-pick --skip" to skip this patch) (use "git cherry-pick --abort" to cancel the cherry-pick operation) nothing to commit, working tree clean ```

To backport manually, run these commands in your terminal:

# Fetch latest updates from GitHub
git fetch
# Create a new working tree
git worktree add .worktrees/backport-4.2.x 4.2.x
# Navigate to the new working tree
cd .worktrees/backport-4.2.x
# Create a new branch
git switch --create backport-8401-to-4.2.x
# Cherry-pick the merged commit of this pull request and resolve the conflicts
git cherry-pick 3c83e4aac2d638c85d97049797d7bf1e0e086e17,f7eb897a702ac60924b5c1b3b8d74fe58b410ebd,18eacd040a6a1bcc3216afda9390038a77654bc2,0b6da5b9f35fb3e50456ef2dff1612ba5b9e5e6f,17b09560e0e6399dbaf3606bd9a38e324548bc10,24d03ecb5f06a6dd4c8dc979a8ed9835c54fad4f,cbc1e9e13463bddbc608839298418ce42875de93,205a0bcd4b81809b6c3d71ce63b72af089c7977c
# Push it to GitHub
git push --set-upstream origin backport-8401-to-4.2.x
# Go back to the original working tree
cd ../..
# Delete the working tree
git worktree remove .worktrees/backport-4.2.x

Then, create a pull request where the base branch is 4.2.x and the compare/head branch is backport-8401-to-4.2.x.