Skip to content

Commit 7986b3f

Browse files
authored
feat(dropdown): optional keeping the searchterm
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
1 parent 88ae1e1 commit 7986b3f

File tree

1 file changed

+11
-8
lines changed

1 file changed

+11
-8
lines changed

src/definitions/modules/dropdown.js

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1407,11 +1407,13 @@
14071407
if (settings.allowAdditions) {
14081408
module.remove.userAddition();
14091409
}
1410-
module.remove.filteredItem();
1410+
if (!settings.keepSearchTerm) {
1411+
module.remove.filteredItem();
1412+
module.remove.searchTerm();
1413+
}
14111414
if (!module.is.visible() && $target.length > 0) {
14121415
module.show();
14131416
}
1414-
module.remove.searchTerm();
14151417
if (!module.is.focusedOnSearch() && skipRefocus !== true) {
14161418
module.focusSearch(true);
14171419
}
@@ -1597,7 +1599,9 @@
15971599
module.verbose('Selecting item from keyboard shortcut', $selectedItem);
15981600
module.event.item.click.call($selectedItem, event);
15991601
if (module.is.searchSelection()) {
1600-
module.remove.searchTerm();
1602+
if (!settings.keepSearchTerm) {
1603+
module.remove.searchTerm();
1604+
}
16011605
if (module.is.multiple()) {
16021606
$search.trigger('focus');
16031607
}
@@ -1814,7 +1818,7 @@
18141818
? value
18151819
: text;
18161820
if (module.can.activate($(element))) {
1817-
module.set.selected(value, $(element));
1821+
module.set.selected(value, $(element), false, settings.keepSearchTerm);
18181822
if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
18191823
module.hideAndClear();
18201824
}
@@ -2464,7 +2468,7 @@
24642468
valueIsSet = searchValue !== ''
24652469
;
24662470
if (isMultiple && hasSearchValue) {
2467-
module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
2471+
module.verbose('Adjusting input width', searchWidth);
24682472
$search.css('width', searchWidth + 'px');
24692473
}
24702474
if (hasSearchValue || (isSearchMultiple && valueIsSet)) {
@@ -2763,7 +2767,7 @@
27632767
return false;
27642768
}
27652769
module.debug('Setting selected menu item to', $selectedItem);
2766-
if (module.is.multiple()) {
2770+
if (module.is.multiple() && !keepSearchTerm) {
27672771
module.remove.searchWidth();
27682772
}
27692773
if (module.is.single()) {
@@ -4006,6 +4010,7 @@
40064010
forceSelection: false, // force a choice on blur with search selection
40074011

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

4028-
glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
4029-
40304033
headerDivider: true, // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>
40314034

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

0 commit comments

Comments
 (0)