Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix scrolling getting broken when defining a custom onServerSearch function #325

Merged
merged 5 commits into from
Apr 23, 2024
Merged

Fix scrolling getting broken when defining a custom onServerSearch function #325

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
02d7439
Fixed validation issues and server search issue
gnbm Apr 21, 2024
2cdb31d
Update formatting
gnbm Apr 21, 2024
b9ed3ae
Update formatting
gnbm Apr 21, 2024
84f4fd0
Add comment
gnbm Apr 23, 2024
b37a0c9
Fixed automated tests failing
gnbm Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cypress/support/commands.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ const dropboxCloseDuration = 200;
const optionsScrollDuration = 300;

Cypress.Commands.add('goToSection', (title) => {
cy.get('a').contains(title).click();
cy.get('a').contains(title).click({force: true});
});

Cypress.Commands.add('getVs', (id) => {
Expand Down
37 changes: 19 additions & 18 deletions docs/assets/virtual-select.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -635,7 +635,6 @@ var keyDownMethodMapping = {
// Delete
8: 'onBackspaceOrDeletePress' // Backspace
};

var valueLessProps = ['autofocus', 'disabled', 'multiple', 'required'];
var nativeProps = ['autofocus', 'class', 'disabled', 'id', 'multiple', 'name', 'placeholder', 'required'];
var attrPropsMapping;
Expand Down Expand Up @@ -675,7 +674,7 @@ var VirtualSelect = /*#__PURE__*/function () {
var clearButtonTooltip = this.getTooltipAttrText(this.clearButtonText);
var ariaLabelledbyText = this.ariaLabelledby ? "aria-labelledby=\"".concat(this.ariaLabelledby, "\"") : '';
var ariaLabelText = this.ariaLabelText ? "aria-label=\"".concat(this.ariaLabelText, "\"") : '';
var ariaLabelClearButtonText = this.ariaLabelClearButtonText ? "aria-label=\"".concat(this.ariaLabelClearButtonText, "\"") : '';
var ariaLabelClearBtnTxt = this.ariaLabelClearButtonText ? "aria-label=\"".concat(this.ariaLabelClearButtonText, "\"") : '';
var isExpanded = false;
if (this.additionalClasses) {
wrapperClasses += " ".concat(this.additionalClasses);
Expand Down Expand Up @@ -712,7 +711,7 @@ var VirtualSelect = /*#__PURE__*/function () {
}

// eslint-disable-next-line no-trailing-spaces
var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n <div class=\"vscomp-toggle-button\">\n <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n ").concat(this.placeholder, "\n </div>\n <div class=\"vscomp-arrow\"></div>\n <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " tabindex=\"0\" ").concat(ariaLabelClearButtonText, ">\n <i class=\"vscomp-clear-icon\"></i>\n </div>\n </div>\n\n ").concat(this.renderDropbox({
var html = "<div id=\"vscomp-ele-wrapper-".concat(uniqueId, "\" class=\"vscomp-ele-wrapper ").concat(wrapperClasses, "\" tabindex=\"0\"\n role=\"combobox\" aria-haspopup=\"listbox\" aria-controls=\"vscomp-dropbox-container-").concat(uniqueId, "\"\n aria-expanded=\"").concat(isExpanded, "\" ").concat(ariaLabelledbyText, " ").concat(ariaLabelText, ">\n <input type=\"hidden\" name=\"").concat(this.name, "\" class=\"vscomp-hidden-input\">\n <div class=\"vscomp-toggle-button\">\n <div class=\"vscomp-value\" ").concat(valueTooltip, ">\n ").concat(this.placeholder, "\n </div>\n <div class=\"vscomp-arrow\"></div>\n <div class=\"vscomp-clear-button toggle-button-child\" ").concat(clearButtonTooltip, " \n tabindex=\"0\" ").concat(ariaLabelClearBtnTxt, ">\n <i class=\"vscomp-clear-icon\"></i>\n </div>\n </div>\n\n ").concat(this.renderDropbox({
wrapperClasses: wrapperClasses
}), "\n </div>");
this.$ele.innerHTML = html;
Expand Down Expand Up @@ -1042,11 +1041,9 @@ var VirtualSelect = /*#__PURE__*/function () {
value: function onClearButtonClick(e) {
if (e.type === 'click') {
this.reset();
} else if (e.type === 'keydown') {
if (e.code === 'Enter' || e.code === 'Space') {
e.stopPropagation();
this.reset();
}
} else if (e.type === 'keydown' && (e.code === 'Enter' || e.code === 'Space')) {
e.stopPropagation();
this.reset();
}
}
}, {
Expand Down Expand Up @@ -1177,7 +1174,6 @@ var VirtualSelect = /*#__PURE__*/function () {
}

/** dom event methods - end */

/** before event methods - start */
}, {
key: "beforeValueSet",
Expand Down Expand Up @@ -1876,6 +1872,7 @@ var VirtualSelect = /*#__PURE__*/function () {
} else {
this.updatePosition();
}
this.setVisibleOptionsCount();
DomUtils.removeClass(this.$allWrappers, 'server-searching');
}
}, {
Expand Down Expand Up @@ -1925,12 +1922,15 @@ var VirtualSelect = /*#__PURE__*/function () {
visibleOptions = [newOption].concat(virtual_select_toConsumableArray(visibleOptions));
}
this.visibleOptions = visibleOptions;
// update number of visible options
this.visibleOptionsCount = visibleOptions.length;
this.renderOptions();
}
}, {
key: "setOptionsPosition",
value: function setOptionsPosition(startIndex) {
var top = (startIndex || this.getVisibleStartIndex()) * this.optionHeight;
// We use the parseInt to fix a Chrome issue when dealing with decimal pixels in translate3d
var top = parseInt((startIndex || this.getVisibleStartIndex()) * this.optionHeight);
gnbm marked this conversation as resolved.
Show resolved Hide resolved
this.$options.style.transform = "translate3d(0, ".concat(top, "px, 0)");
DomUtils.setData(this.$options, 'top', top);
}
Expand Down Expand Up @@ -2013,7 +2013,7 @@ var VirtualSelect = /*#__PURE__*/function () {
valueText.push(label);
selectedValuesCount += 1;
if (showValueAsTags) {
//Will cause text overflow in runtime and if so, the tooltip information is prepared
// Will cause text overflow in runtime and if so,the tooltip information is prepared
var valueTooltipForTags = Utils.willTextOverflow($valueText.parentElement, label) ? _this10.getTooltipAttrText(label, false, true) : '';
var valueTagHtml = "<span class=\"vscomp-value-tag\" data-index=\"".concat(d.index, "\" ").concat(valueTooltipForTags, ">\n <span class=\"vscomp-value-tag-content\">").concat(label, "</span>\n <span class=\"vscomp-value-tag-clear-button\">\n <i class=\"vscomp-clear-icon\"></i>\n </span>\n </span>");
valueTooltip.push(valueTagHtml);
Expand Down Expand Up @@ -2723,7 +2723,7 @@ var VirtualSelect = /*#__PURE__*/function () {
DomUtils.addClass(this.$allWrappers, 'closed');
if (!isSilent) {
DomUtils.dispatchEvent(this.$ele, 'afterClose');
//only focus there are no pre-selected options or when selecting new options
// Only focus there are no pre-selected options or when selecting new options
if (this.initialSelectedValue && this.initialSelectedValue.length === 0 || this.selectedValues.length > 0) {
this.focus();
}
Expand Down Expand Up @@ -2782,6 +2782,7 @@ var VirtualSelect = /*#__PURE__*/function () {
DomUtils.setAttr($ele, 'disabled', '');
this.$noOptions.focus();
} else {
$ele.removeAttribute('disabled');
$ele.focus();
}
} else {
Expand Down Expand Up @@ -3029,8 +3030,8 @@ var VirtualSelect = /*#__PURE__*/function () {

/** unselected items are */
if ( /** when unselecting all, selectAllOnlyVisible feature disabled or visible items or already unselected items */
!selectingAll && (!selectAllOnlyVisible || isVisible || !isSelected) || /** when selecting all, selectAllOnlyVisible feature enabled and hidden items those are not already selected */
selectingAll && selectAllOnlyVisible && !isVisible && !isSelected) {
!selectingAll && (!selectAllOnlyVisible || isVisible || !isSelected) || ( /** when selecting all, selectAllOnlyVisible feature enabled and hidden items those are not already selected */
selectingAll && selectAllOnlyVisible && !isVisible && !isSelected)) {
option.isSelected = false;
} else {
option.isSelected = true;
Expand All @@ -3056,10 +3057,10 @@ var VirtualSelect = /*#__PURE__*/function () {
isAllSelected = this.isAllOptionsSelected();
}

/** when all options not selected, checking if all visible options selected
/** When all options not selected, checking if all visible options selected
* Also, in a search mode, validate that we still have visible items
*/
if (!isAllSelected && this.selectAllOnlyVisible && (this.searchValue !== '' && this.visibleOptionsCount > 0 || this.searchValue == '')) {
if (!isAllSelected && this.selectAllOnlyVisible && this.searchValue !== '' && (this.visibleOptionsCount > 0 || this.searchValue === '')) {
isAllVisibleSelected = this.isAllOptionsSelected(true);
}
DomUtils.toggleClass(this.$toggleAllCheckbox, 'checked', isAllSelected || isAllVisibleSelected);
Expand Down Expand Up @@ -3402,8 +3403,8 @@ var VirtualSelect = /*#__PURE__*/function () {
var hasError = false;
var selectedValues = this.selectedValues,
minValues = this.minValues;
if (this.required && (Utils.isEmpty(selectedValues) || /** required minium options not selected */
this.multiple && minValues && selectedValues.length < minValues)) {
if (this.required && (Utils.isEmpty(selectedValues) || ( /** required minium options not selected */
this.multiple && minValues && selectedValues.length < minValues))) {
hasError = true;
}
DomUtils.toggleClass(this.$allWrappers, 'has-error', hasError);
Expand Down
2 changes: 1 addition & 1 deletion docs/assets/virtual-select.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading