Skip to content

Commit

Permalink
WICKET-7133 Ability move focus back to the autocomplete field when se…
Browse files Browse the repository at this point in the history
…lecting an item using the Tab key
  • Loading branch information
Erik Strid authored and bitstorm committed Dec 2, 2024
1 parent 49cde3e commit e04d58b
Show file tree
Hide file tree
Showing 3 changed files with 64 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,8 @@ protected final String constructSettingsJS()
{
sb.append(",className: '").append(settings.getCssClassName()).append('\'');
}
sb.append(",keyTabBehavior: '").append(
settings.getKeyTabBehavior().getValue()).append('\'');
sb.append('}');
return sb.toString();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -379,4 +381,56 @@ public AutoCompleteSettings setMinInputLength(int minInputLength)
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;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit e04d58b

Please sign in to comment.