@syncfusion/ej2-dropdowns 27.1.58 → 27.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7821,6 +7821,11 @@ let DropDownTree = class DropDownTree extends Component {
7821
7821
  this.checkAllParent.focus();
7822
7822
  }
7823
7823
  break;
7824
+ case 'tab':
7825
+ if (!this.isPopupOpen && this.inputFocus) {
7826
+ this.onFocusOut();
7827
+ }
7828
+ break;
7824
7829
  }
7825
7830
  }
7826
7831
  });
@@ -15274,6 +15279,15 @@ let MultiSelect = class MultiSelect extends DropDownBase {
15274
15279
  this.previousEndIndex = 0;
15275
15280
  }
15276
15281
  }
15282
+ this.isClearAllItem = true;
15283
+ EventHandler.add(document, 'mouseup', this.preventSelection, this);
15284
+ }
15285
+ preventSelection(e) {
15286
+ if (this.isClearAllItem) {
15287
+ e.stopPropagation();
15288
+ }
15289
+ this.isClearAllItem = false;
15290
+ EventHandler.remove(document, 'mouseup', this.preventSelection);
15277
15291
  }
15278
15292
  clearAllCallback(e, isClearAll) {
15279
15293
  const tempValues = this.value ? this.value.slice() : [];
@@ -16026,127 +16040,131 @@ let MultiSelect = class MultiSelect extends DropDownBase {
16026
16040
  this.updateData(delimChar, e);
16027
16041
  }
16028
16042
  onMouseClick(e) {
16029
- this.keyCode = null;
16030
- this.scrollFocusStatus = false;
16031
- this.keyboardEvent = null;
16032
- let target = e.target;
16033
- const li = closest(target, '.' + dropDownBaseClasses.li);
16034
- if (this.enableVirtualization && li && li.classList.contains('e-virtual-list')) {
16035
- return;
16036
- }
16037
- const headerLi = closest(target, '.' + dropDownBaseClasses.group);
16038
- if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {
16039
- target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild
16040
- : e.target;
16041
- if (target.classList.contains('e-check')) {
16042
- this.selectAllItem(false, e);
16043
- target.classList.remove('e-check');
16044
- target.classList.remove('e-stop');
16045
- closest(target, '.' + 'e-list-group-item').classList.remove('e-active');
16046
- target.setAttribute('aria-selected', 'false');
16047
- }
16048
- else {
16049
- this.selectAllItem(true, e);
16050
- target.classList.remove('e-stop');
16051
- target.classList.add('e-check');
16052
- closest(target, '.' + 'e-list-group-item').classList.add('e-active');
16053
- target.setAttribute('aria-selected', 'true');
16043
+ if (!this.isClearAllItem) {
16044
+ this.keyCode = null;
16045
+ this.scrollFocusStatus = false;
16046
+ this.keyboardEvent = null;
16047
+ let target = e.target;
16048
+ const li = closest(target, '.' + dropDownBaseClasses.li);
16049
+ if (this.enableVirtualization && li && li.classList.contains('e-virtual-list')) {
16050
+ return;
16054
16051
  }
16055
- this.refreshSelection();
16056
- this.checkSelectAll();
16057
- }
16058
- else {
16059
- if (this.isValidLI(li)) {
16060
- let limit = this.value && this.value.length ? this.value.length : 0;
16061
- if (li.classList.contains('e-active')) {
16062
- limit = limit - 1;
16052
+ const headerLi = closest(target, '.' + dropDownBaseClasses.group);
16053
+ if (headerLi && this.enableGroupCheckBox && this.mode === 'CheckBox' && this.fields.groupBy) {
16054
+ target = target.classList.contains('e-list-group-item') ? target.firstElementChild.lastElementChild
16055
+ : e.target;
16056
+ if (target.classList.contains('e-check')) {
16057
+ this.selectAllItem(false, e);
16058
+ target.classList.remove('e-check');
16059
+ target.classList.remove('e-stop');
16060
+ closest(target, '.' + 'e-list-group-item').classList.remove('e-active');
16061
+ target.setAttribute('aria-selected', 'false');
16063
16062
  }
16064
- if (limit < this.maximumSelectionLength) {
16065
- this.updateListSelection(li, e);
16066
- this.checkPlaceholderSize();
16067
- this.addListFocus(li);
16068
- if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {
16069
- if (this.mode !== 'CheckBox') {
16070
- this.focusAtLastListItem(li.getAttribute('data-value'));
16071
- this.refreshSelection();
16072
- }
16063
+ else {
16064
+ this.selectAllItem(true, e);
16065
+ target.classList.remove('e-stop');
16066
+ target.classList.add('e-check');
16067
+ closest(target, '.' + 'e-list-group-item').classList.add('e-active');
16068
+ target.setAttribute('aria-selected', 'true');
16069
+ }
16070
+ this.refreshSelection();
16071
+ this.checkSelectAll();
16072
+ }
16073
+ else {
16074
+ if (this.isValidLI(li)) {
16075
+ let limit = this.value && this.value.length ? this.value.length : 0;
16076
+ if (li.classList.contains('e-active')) {
16077
+ limit = limit - 1;
16073
16078
  }
16074
- else {
16075
- this.makeTextBoxEmpty();
16079
+ if (limit < this.maximumSelectionLength) {
16080
+ this.updateListSelection(li, e);
16081
+ this.checkPlaceholderSize();
16082
+ this.addListFocus(li);
16083
+ if ((this.allowCustomValue || this.allowFiltering) && this.mainList && this.listData) {
16084
+ if (this.mode !== 'CheckBox') {
16085
+ this.focusAtLastListItem(li.getAttribute('data-value'));
16086
+ this.refreshSelection();
16087
+ }
16088
+ }
16089
+ else {
16090
+ this.makeTextBoxEmpty();
16091
+ }
16076
16092
  }
16077
- }
16078
- if (this.mode === 'CheckBox') {
16079
- this.updateDelimView();
16080
- if (this.value && this.value.length > 50) {
16081
- setTimeout(() => {
16093
+ if (this.mode === 'CheckBox') {
16094
+ this.updateDelimView();
16095
+ if (this.value && this.value.length > 50) {
16096
+ setTimeout(() => {
16097
+ this.updateDelimeter(this.delimiterChar, e);
16098
+ }, 0);
16099
+ }
16100
+ else {
16082
16101
  this.updateDelimeter(this.delimiterChar, e);
16083
- }, 0);
16102
+ }
16103
+ this.refreshInputHight();
16084
16104
  }
16085
16105
  else {
16086
16106
  this.updateDelimeter(this.delimiterChar, e);
16087
16107
  }
16088
- this.refreshInputHight();
16089
- }
16090
- else {
16091
- this.updateDelimeter(this.delimiterChar, e);
16092
- }
16093
- this.checkSelectAll();
16094
- this.refreshPopup();
16095
- if (this.hideSelectedItem) {
16096
- this.focusAtFirstListItem();
16097
- }
16098
- if (this.closePopupOnSelect) {
16099
- this.hidePopup(e);
16108
+ this.checkSelectAll();
16109
+ this.refreshPopup();
16110
+ if (this.hideSelectedItem) {
16111
+ this.focusAtFirstListItem();
16112
+ }
16113
+ if (this.closePopupOnSelect) {
16114
+ this.hidePopup(e);
16115
+ }
16116
+ else {
16117
+ e.preventDefault();
16118
+ }
16119
+ const isFilterData = this.targetElement().trim() !== '' ? true : false;
16120
+ this.makeTextBoxEmpty();
16121
+ this.findGroupStart(target);
16122
+ if (this.mode !== 'CheckBox') {
16123
+ this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent, isFilterData);
16124
+ }
16100
16125
  }
16101
16126
  else {
16102
16127
  e.preventDefault();
16103
16128
  }
16104
- const isFilterData = this.targetElement().trim() !== '' ? true : false;
16105
- this.makeTextBoxEmpty();
16106
- this.findGroupStart(target);
16107
- if (this.mode !== 'CheckBox') {
16108
- this.refreshListItems(isNullOrUndefined(li) ? null : li.textContent, isFilterData);
16109
- }
16110
- }
16111
- else {
16112
- e.preventDefault();
16113
- }
16114
- if (this.enableVirtualization && this.hideSelectedItem) {
16115
- const visibleListElements = this.list.querySelectorAll('li.'
16116
- + dropDownBaseClasses.li
16117
- + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');
16118
- if (visibleListElements.length) {
16119
- const actualCount = this.virtualListHeight > 0 ? Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
16120
- if (visibleListElements.length < (actualCount + 2)) {
16121
- let query = this.getForQuery(this.value).clone();
16122
- query = query.skip(this.virtualItemStartIndex);
16123
- this.resetList(this.dataSource, this.fields, query);
16124
- this.UpdateSkeleton();
16125
- this.liCollections = this.list.querySelectorAll('.' + dropDownBaseClasses.li);
16126
- this.virtualItemCount = this.itemCount;
16127
- if (this.mode !== 'CheckBox') {
16128
- this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length :
16129
- this.totalItemCount;
16130
- }
16131
- if (!this.list.querySelector('.e-virtual-ddl')) {
16132
- const virualElement = this.createElement('div', {
16133
- id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
16134
- });
16135
- this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
16136
- }
16137
- else {
16138
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16139
- this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
16140
- }
16141
- if (this.list.querySelector('.e-virtual-ddl-content')) {
16142
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16143
- this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
16129
+ if (this.enableVirtualization && this.hideSelectedItem) {
16130
+ const visibleListElements = this.list.querySelectorAll('li.'
16131
+ + dropDownBaseClasses.li
16132
+ + ':not(.' + HIDE_LIST + ')' + ':not(.e-reorder-hide)' + ':not(.e-virtual-list)');
16133
+ if (visibleListElements.length) {
16134
+ const actualCount = this.virtualListHeight > 0 ?
16135
+ Math.floor(this.virtualListHeight / this.listItemHeight) : 0;
16136
+ if (visibleListElements.length < (actualCount + 2)) {
16137
+ let query = this.getForQuery(this.value).clone();
16138
+ query = query.skip(this.virtualItemStartIndex);
16139
+ this.resetList(this.dataSource, this.fields, query);
16140
+ this.UpdateSkeleton();
16141
+ this.liCollections = this.list.querySelectorAll('.'
16142
+ + dropDownBaseClasses.li);
16143
+ this.virtualItemCount = this.itemCount;
16144
+ if (this.mode !== 'CheckBox') {
16145
+ this.totalItemCount = this.value && this.value.length ? this.totalItemCount - this.value.length :
16146
+ this.totalItemCount;
16147
+ }
16148
+ if (!this.list.querySelector('.e-virtual-ddl')) {
16149
+ const virualElement = this.createElement('div', {
16150
+ id: this.element.id + '_popup', className: 'e-virtual-ddl', styles: this.GetVirtualTrackHeight()
16151
+ });
16152
+ this.popupWrapper.querySelector('.e-dropdownbase').appendChild(virualElement);
16153
+ }
16154
+ else {
16155
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16156
+ this.list.getElementsByClassName('e-virtual-ddl')[0].style = this.GetVirtualTrackHeight();
16157
+ }
16158
+ if (this.list.querySelector('.e-virtual-ddl-content')) {
16159
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
16160
+ this.list.getElementsByClassName('e-virtual-ddl-content')[0].style = this.getTransformValues();
16161
+ }
16144
16162
  }
16145
16163
  }
16146
16164
  }
16165
+ this.refreshPlaceHolder();
16166
+ this.deselectHeader();
16147
16167
  }
16148
- this.refreshPlaceHolder();
16149
- this.deselectHeader();
16150
16168
  }
16151
16169
  }
16152
16170
  findGroupStart(target) {