Skip to content

Commit

Permalink
feat(dropdown): optional keeping the searchterm
Browse files Browse the repository at this point in the history
New option keepSearchTerm for multiple search selection dropdowns. This (almost) reflects the current SUI behavior (which we fixed already)

The list stays filtered
The search term is not removed on item selection (to make it clear why the list is still filtered on selection)
This PR also removes the completely unused glyphWidth setting. This is all done in CSS instead of JS (not even in current SUI) and we fixed the search width glyph calculation already by #145 which in turn closes Semantic-Org/Semantic-UI#6655
  • Loading branch information
lubber-de authored Mar 31, 2023
1 parent 88ae1e1 commit 7986b3f
Showing 1 changed file with 11 additions and 8 deletions.
19 changes: 11 additions & 8 deletions src/definitions/modules/dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -1407,11 +1407,13 @@
if (settings.allowAdditions) {
module.remove.userAddition();
}
module.remove.filteredItem();
if (!settings.keepSearchTerm) {
module.remove.filteredItem();
module.remove.searchTerm();
}
if (!module.is.visible() && $target.length > 0) {
module.show();
}
module.remove.searchTerm();
if (!module.is.focusedOnSearch() && skipRefocus !== true) {
module.focusSearch(true);
}
Expand Down Expand Up @@ -1597,7 +1599,9 @@
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
module.event.item.click.call($selectedItem, event);
if (module.is.searchSelection()) {
module.remove.searchTerm();
if (!settings.keepSearchTerm) {
module.remove.searchTerm();
}
if (module.is.multiple()) {
$search.trigger('focus');
}
Expand Down Expand Up @@ -1814,7 +1818,7 @@
? value
: text;
if (module.can.activate($(element))) {
module.set.selected(value, $(element));
module.set.selected(value, $(element), false, settings.keepSearchTerm);
if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
module.hideAndClear();
}
Expand Down Expand Up @@ -2464,7 +2468,7 @@
valueIsSet = searchValue !== ''
;
if (isMultiple && hasSearchValue) {
module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
module.verbose('Adjusting input width', searchWidth);
$search.css('width', searchWidth + 'px');
}
if (hasSearchValue || (isSearchMultiple && valueIsSet)) {
Expand Down Expand Up @@ -2763,7 +2767,7 @@
return false;
}
module.debug('Setting selected menu item to', $selectedItem);
if (module.is.multiple()) {
if (module.is.multiple() && !keepSearchTerm) {
module.remove.searchWidth();
}
if (module.is.single()) {
Expand Down Expand Up @@ -4006,6 +4010,7 @@
forceSelection: false, // force a choice on blur with search selection

allowAdditions: false, // whether multiple select should allow user added values
keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection
ignoreCase: false, // whether to consider case sensitivity when creating labels
ignoreSearchCase: true, // whether to consider case sensitivity when filtering items
hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value
Expand All @@ -4025,8 +4030,6 @@
duration: 200, // duration of transition
displayType: false, // displayType of transition

glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width

headerDivider: true, // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>

collapseOnActionable: true, // whether the dropdown should collapse upon selection of an actionable item
Expand Down

0 comments on commit 7986b3f

Please sign in to comment.