(wicket) branch wicket-10.x updated: WICKET-7133 Ability move focus back to the autocomplete field when selecting an item using the Tab key

[ad...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

adelbene pushed a commit to branch wicket-10.x
in repository https://gitbox.apache.org/repos/asf/wicket.git


The following commit(s) were added to refs/heads/wicket-10.x by this push:
     new 412daef41d WICKET-7133 Ability move focus back to the autocomplete field when selecting an item using the Tab key
412daef41d is described below

commit 412daef41dfeaa2a60ca46f057fed9a24dd77947
Author: Erik Strid <er...@idainfront.se>
AuthorDate: Wed Nov 20 06:49:02 2024 +0100

    WICKET-7133 Ability move focus back to the autocomplete field when selecting an item using the Tab key
---
 .../autocomplete/AbstractAutoCompleteBehavior.java |  2 +
 .../html/autocomplete/AutoCompleteSettings.java    | 54 ++++++++++++++++++++++
 .../html/autocomplete/wicket-autocomplete.js       |  9 +++-
 3 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AbstractAutoCompleteBehavior.java b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AbstractAutoCompleteBehavior.java
index 6e9db0f21b..166b9fea1e 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AbstractAutoCompleteBehavior.java
+++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AbstractAutoCompleteBehavior.java
@@ -187,6 +187,8 @@ public abstract class AbstractAutoCompleteBehavior extends AbstractDefaultAjaxBe
 		{
 			sb.append(",className: '").append(settings.getCssClassName()).append('\'');
 		}
+		sb.append(",keyTabBehavior: '").append(
+			settings.getKeyTabBehavior().getValue()).append('\'');
 		sb.append('}');
 		return sb.toString();
 	}
diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AutoCompleteSettings.java b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AutoCompleteSettings.java
index c9c43ceac8..010846686a 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AutoCompleteSettings.java
+++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/AutoCompleteSettings.java
@@ -74,6 +74,8 @@ public final class AutoCompleteSettings implements IClusterable
 
 	private int minInputLength = 1;
 
+	private KeyTabBehavior keyTabBehavior = KeyTabBehavior.SELECT_FOCUS_NEXT_ELEMENT;
+
 	/**
 	 * Indicates whether the first item in the list is automatically selected when the autocomplete
 	 * list is shown.
@@ -379,4 +381,56 @@ public final class AutoCompleteSettings implements IClusterable
 		this.minInputLength = minInputLength;
 		return this;
 	}
+
+	/**
+	 * Indicates how the Tab key should be handled when having an item in the autocomplete list
+	 * selected, {@link KeyTabBehavior#SELECT_FOCUS_NEXT_ELEMENT} is the default behavior.
+	 *
+	 * @return the behavior that should be used when the Tab key is pressed
+	 */
+	public KeyTabBehavior getKeyTabBehavior()
+	{
+		return keyTabBehavior;
+	}
+
+	/**
+	 * Set how the Tab key should be handled when having an item in the autocomplete list selected.
+	 *
+	 * @param keyTabBehavior the behavior that should be used when the Tab key is pressed,
+	 * {@link KeyTabBehavior#SELECT_FOCUS_NEXT_ELEMENT} is the default behavior
+	 * @return this {@link AutoCompleteSettings}
+	 */
+	public AutoCompleteSettings setKeyTabBehavior(KeyTabBehavior keyTabBehavior)
+	{
+		this.keyTabBehavior = keyTabBehavior;
+		return this;
+	}
+
+	/**
+	 * A behavior that can be used to control how the Tab key should be handled when having an item
+	 * in the autocomplete list is marked.
+	 */
+	public enum KeyTabBehavior
+	{
+		/**
+		 * Select the currently marked item and move the focus to the next focusable element.
+		 */
+		SELECT_FOCUS_NEXT_ELEMENT("selectFocusNextElement"),
+		/**
+		 * Select the currently marked item and move the focus to the auto complete input field.
+		 */
+		SELECT_FOCUS_INPUT("selectFocusAutocompleteInput");
+
+		private final String value;
+
+		KeyTabBehavior(String value)
+		{
+			this.value = value;
+		}
+
+		public String getValue()
+		{
+			return value;
+		}
+	}
 }
diff --git a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js
index be20fc1652..eb3afea13d 100644
--- a/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js
+++ b/wicket-extensions/src/main/java/org/apache/wicket/extensions/ajax/markup/html/autocomplete/wicket-autocomplete.js
@@ -126,7 +126,8 @@
 			});
 
 			Wicket.Event.add(obj, 'keydown', function (jqEvent) {
-				switch(Wicket.Event.keyCode(jqEvent)){
+				var keyCode = Wicket.Event.keyCode(jqEvent);
+				switch (keyCode) {
 					case KEY_UP:
 						if (elementCount > 0) {
 							if (selected>-1) {
@@ -183,6 +184,12 @@
 
 							hideAutoComplete();
 
+							if (cfg.keyTabBehavior === 'selectFocusAutocompleteInput' && keyCode === KEY_TAB) {
+								// prevent moving focus to the next component if an item in the dropdown is selected
+								// using the Tab key
+								jqEvent.preventDefault();
+							}
+
 							ignoreKeyEnter = true;
 						} else if (Wicket.AutoCompleteSettings.enterHidesWithNoSelection) {
 							hideAutoComplete();