Skip to content

Commit

Permalink
Added ability to prevent autocomplete to move focus to the next compo…
Browse files Browse the repository at this point in the history
…nent when selecting an item using the tab key in the autocomplete list
  • Loading branch information
Erik Strid committed Nov 20, 2024
1 parent e7d049b commit 637dc3d
Show file tree
Hide file tree
Showing 3 changed files with 33 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,7 @@ protected final String constructSettingsJS()
{
sb.append(",className: '").append(settings.getCssClassName()).append('\'');
}
sb.append(",focusInputOnTabSelection: ").append(settings.shouldFocusInputOnTabSelection());
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 boolean focusInputOnTabSelection = false;

/**
* Indicates whether the first item in the list is automatically selected when the autocomplete
* list is shown.
Expand Down Expand Up @@ -379,4 +381,30 @@ 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.
*
* @return <code>true</code> if the focus should return to the input field, <code>false</code>
* moves the focus to the next component.
*/
public boolean shouldFocusInputOnTabSelection()
{
return focusInputOnTabSelection;
}

/**
* Set how the tab key should be handled when having an item in the autocomplete list selected.
*
* @param focusInputOnTabSelection <code>true</code> if the focus should return to the input
* field when the Tab key pressed, <code>false</code> is the default which moves the focus to
* the next component.
* @return this {@link AutoCompleteSettings}
*/
public AutoCompleteSettings setFocusInputOnTabSelection(boolean focusInputOnTabSelection)
{
this.focusInputOnTabSelection = focusInputOnTabSelection;
return this;
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,10 @@
}
break;
case KEY_TAB:
if (cfg.focusInputOnTabSelection && selected > -1) {
// prevent moving focus to the next component if an item in the dropdown is selected
jqEvent.preventDefault();
}
case KEY_ENTER:
ignoreKeyEnter = false;

Expand Down

0 comments on commit 637dc3d

Please sign in to comment.