Skip to content

Commit 6f10de3

Browse files
oltonolton
committed
Fixed clear button action in the select component
1 parent 00b8a2e commit 6f10de3

File tree

4 files changed

+67
-53
lines changed

4 files changed

+67
-53
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,5 @@
33
+ [x] Fix validator for the `required` rule for the `input` with role
44
+ [x] Improved rule `date` for validator
55
+ [x] Added component `resizable-container`
6-
+ [x] Fixed bug in `hotkey` component when using `$(...).hotkey()` method for non-input elements
6+
+ [x] Fixed bug in `hotkey` component when using `$(...).hotkey()` method for non-input elements
7+
+ [x] Fixed clear button action in the `select` component

‎lib/metro.js‎

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -22118,6 +22118,7 @@
2211822118
sourceType: "json",
2211922119
filterSource: null,
2212022120
filterThreshold: 500,
22121+
closeOnClear: true,
2212122122
clsSelect: "",
2212222123
clsSelectInput: "",
2212322124
clsPrepend: "",
@@ -22250,7 +22251,7 @@
2225022251
const element2 = this.element;
2225122252
const o2 = this.options;
2225222253
const select = element2.parent();
22253-
const list2 = select.find("ul").empty();
22254+
const list = select.find("ul").empty();
2225422255
const selected = element2.find("option[selected]").length > 0;
2225522256
const multiple = element2[0].multiple;
2225622257
const input = element2.siblings(".select-input");
@@ -22262,9 +22263,9 @@
2226222263
}
2226322264
$7.each(element2.children(), function() {
2226422265
if (this.tagName === "OPTION") {
22265-
that._addOption(this, list2, input, multiple, null);
22266+
that._addOption(this, list, input, multiple, null);
2226622267
} else if (this.tagName === "OPTGROUP") {
22267-
that._addOptionGroup(this, list2, input, multiple);
22268+
that._addOptionGroup(this, list, input, multiple);
2226822269
}
2226922270
});
2227022271
this._fireEvent("options", {
@@ -22309,7 +22310,7 @@
2230922310
container.addClass("drop-full-size");
2231022311
}
2231122312
drop_container_input = $7("<div>").appendTo(drop_container);
22312-
const list2 = $7("<ul>").addClass("option-list").addClass(o2.clsDropList).css({
22313+
const list = $7("<ul>").addClass("option-list").addClass(o2.clsDropList).css({
2231322314
"max-height": o2.dropHeight
2231422315
});
2231522316
const filter_input = $7(
@@ -22322,7 +22323,7 @@
2232222323
if (o2.filter !== true) {
2232322324
drop_container_input.hide();
2232422325
}
22325-
drop_container.append(list2);
22326+
drop_container.append(list);
2232622327
if (o2.source) {
2232722328
await this.fetch(o2.source, {
2232822329
method: o2.sourceMethod || "GET",
@@ -22334,7 +22335,7 @@
2233422335
this._createOptions();
2233522336
this._setPlaceholder();
2233622337
this._createDroppable(drop_container);
22337-
this.list = list2;
22338+
this.list = list;
2233822339
if (o2.clearButton === true && !element2[0].readOnly) {
2233922340
const clearButton = $7("<button>").addClass("button input-clear-button").addClass(o2.clsClearButton).attr("tabindex", -1).attr("type", "button").html(o2.clearButtonIcon);
2234022341
clearButton.appendTo(buttons);
@@ -22379,7 +22380,7 @@
2237922380
const filter_input = drop_container.find("input");
2238022381
const container = this.element.closest(".select");
2238122382
const dropdown_toggle = drop_container.siblings(".dropdown-caret");
22382-
const list2 = drop_container.find("ul");
22383+
const list = drop_container.find("ul");
2238322384
Metro2.makePlugin(drop_container, "dropdown", {
2238422385
dropFilter: ".select",
2238522386
duration: o2.duration,
@@ -22400,18 +22401,18 @@
2240022401
}
2240122402
});
2240222403
filter_input.val("").trigger(Metro2.events.keyup);
22403-
target = list2.find("li.active").length > 0 ? $7(list2.find("li.active")[0]) : void 0;
22404+
target = list.find("li.active").length > 0 ? $7(list.find("li.active")[0]) : void 0;
2240422405
if (target !== void 0) {
22405-
list2[0].scrollTop = target.position().top - (list2.height() - target.height()) / 2;
22406+
list[0].scrollTop = target.position().top - (list.height() - target.height()) / 2;
2240622407
}
2240722408
this._fireEvent("drop", {
22408-
list: list2[0]
22409+
list: list[0]
2240922410
});
2241022411
},
2241122412
onUp: () => {
2241222413
dropdown_toggle.removeClass("active-toggle");
2241322414
this._fireEvent("up", {
22414-
list: list2[0]
22415+
list: list[0]
2241522416
});
2241622417
}
2241722418
});
@@ -22433,7 +22434,7 @@
2243322434
const drop_container = container.find(".drop-container");
2243422435
const input = element2.siblings(".select-input");
2243522436
const filter_input = drop_container.find("input");
22436-
const list2 = drop_container.find("ul");
22437+
const list = drop_container.find("ul");
2243722438
const clearButton = container.find(".input-clear-button");
2243822439
const checkbox = container.find(".select-focus-trigger");
2243922440
checkbox.on("focus", () => {
@@ -22458,7 +22459,7 @@
2245822459
$7(".focused").removeClass("focused");
2245922460
container.addClass("focused");
2246022461
});
22461-
list2.on(Metro2.events.click, "li", function(e2) {
22462+
list.on(Metro2.events.click, "li", function(e2) {
2246222463
if ($7(this).hasClass("group-title")) {
2246322464
e2.preventDefault();
2246422465
e2.stopPropagation();
@@ -22478,7 +22479,7 @@
2247822479
leaf.addClass("d-none");
2247922480
input.append(that._addTag(html, leaf));
2248022481
} else {
22481-
list2.find("li.active").removeClass("active").removeClass(o2.clsOptionActive);
22482+
list.find("li.active").removeClass("active").removeClass(o2.clsOptionActive);
2248222483
leaf.addClass("active").addClass(o2.clsOptionActive);
2248322484
input.html(html);
2248422485
Metro2.getPlugin(drop_container, "dropdown").close();
@@ -22521,7 +22522,7 @@
2252122522
});
2252222523
const filter_input_change = Hooks.useDebounce(async (e2) => {
2252322524
const o3 = this.options;
22524-
const list3 = this.list;
22525+
const list2 = this.list;
2252522526
const filter = e2.target.value.toLowerCase();
2252622527
const filterSource = `${o3.filterSource}${filter}`;
2252722528
if (o3.filterSource) {
@@ -22536,7 +22537,7 @@
2253622537
true
2253722538
);
2253822539
} else {
22539-
const li = list3.find("li");
22540+
const li = list2.find("li");
2254022541
let i3;
2254122542
let a2;
2254222543
let t;
@@ -22813,9 +22814,14 @@
2281322814
const element2 = this.element;
2281422815
const o2 = this.options;
2281522816
const input = element2.siblings(".select-input");
22817+
const drop = element2.siblings(".drop-container");
22818+
const list = drop.find("ul");
2281622819
element2.val(o2.emptyValue);
2281722820
if (element2[0].multiple) {
2281822821
list.find("li").removeClass("d-none");
22822+
if (o2.closeOnClear) {
22823+
drop.data("dropdown").close();
22824+
}
2281922825
}
2282022826
input.clear();
2282122827
this._setPlaceholder();
@@ -22833,14 +22839,14 @@
2283322839
const drop_container = container.find(".drop-container");
2283422840
const input = element2.siblings(".select-input");
2283522841
const filter_input = drop_container.find("input");
22836-
const list2 = drop_container.find("ul");
22842+
const list = drop_container.find("ul");
2283722843
const clearButton = container.find(".input-clear-button");
2283822844
container.off(Metro2.events.click);
2283922845
container.off(Metro2.events.click, ".input-clear-button");
2284022846
input.off(Metro2.events.click);
2284122847
filter_input.off(Metro2.events.blur);
2284222848
filter_input.off(Metro2.events.focus);
22843-
list2.off(Metro2.events.click, "li");
22849+
list.off(Metro2.events.click, "li");
2284422850
filter_input.off(Metro2.events.keyup);
2284522851
drop_container.off(Metro2.events.click);
2284622852
clearButton.off(Metro2.events.click);
@@ -26033,34 +26039,34 @@
2603326039
});
2603426040
const scrollLatency = 150;
2603526041
$7.each(["month", "day", "year"], function() {
26036-
const list2 = picker.find(`.sel-${this}`);
26042+
const list = picker.find(`.sel-${this}`);
2603726043
const scrollFn = Hooks.useDebounce((e2) => {
2603826044
that.listTimer[this] = null;
26039-
const target = Math.round(Math.ceil(list2.scrollTop()) / 40);
26040-
const targetElement = list2.find(`.js-${this}-${target}`);
26045+
const target = Math.round(Math.ceil(list.scrollTop()) / 40);
26046+
const targetElement = list.find(`.js-${this}-${target}`);
2604126047
const scrollTop = targetElement.position().top - o2.distance * 40;
26042-
list2.find(".active").removeClass("active");
26043-
list2[0].scrollTop = scrollTop;
26048+
list.find(".active").removeClass("active");
26049+
list[0].scrollTop = scrollTop;
2604426050
targetElement.addClass("active");
26045-
Metro2.utils.exec(o2.onScroll, [targetElement, list2, picker], list2[0]);
26051+
Metro2.utils.exec(o2.onScroll, [targetElement, list, picker], list[0]);
2604626052
}, scrollLatency);
26047-
list2.on("scroll", scrollFn);
26053+
list.on("scroll", scrollFn);
2604826054
});
2604926055
picker.on(Metro2.events.click, "ul li", function(e2) {
2605026056
const target = $7(this);
26051-
const list2 = target.closest("ul");
26057+
const list = target.closest("ul");
2605226058
const scrollTop = target.position().top - o2.distance * 40;
26053-
list2.find(".active").removeClass("active");
26059+
list.find(".active").removeClass("active");
2605426060
$7.animate({
26055-
el: list2[0],
26061+
el: list[0],
2605626062
draw: {
2605726063
scrollTop
2605826064
},
2605926065
dur: 300
2606026066
});
26061-
list2[0].scrollTop = scrollTop;
26067+
list[0].scrollTop = scrollTop;
2606226068
target.addClass("active");
26063-
Metro2.utils.exec(o2.onScroll, [target, list2, picker], list2[0]);
26069+
Metro2.utils.exec(o2.onScroll, [target, list, picker], list[0]);
2606426070
});
2606526071
picker.on(Metro2.events.click, ".action-today", (e2) => {
2606626072
const now = datetime();
@@ -31825,11 +31831,11 @@
3182531831
const new_node = this._createNode(data);
3182631832
new_node.addClass("node").insertBefore(n3);
3182731833
const parent_node = new_node.closest(".node");
31828-
const list2 = new_node.closest("ul");
31834+
const list = new_node.closest("ul");
3182931835
this._fireEvent("node-insert", {
3183031836
newNode: new_node,
3183131837
parentNode: parent_node,
31832-
list: list2
31838+
list
3183331839
});
3183431840
return new_node;
3183531841
},
@@ -31841,11 +31847,11 @@
3184131847
const new_node = this._createNode(data);
3184231848
new_node.addClass("node").insertAfter(n3);
3184331849
const parent_node = new_node.closest(".node");
31844-
const list2 = new_node.closest("ul");
31850+
const list = new_node.closest("ul");
3184531851
this._fireEvent("node-insert", {
3184631852
newNode: new_node,
3184731853
parentNode: parent_node,
31848-
list: list2
31854+
list
3184931855
});
3185031856
return new_node;
3185131857
},
@@ -42110,11 +42116,11 @@
4211042116
});
4211142117
const scrollLatency = 150;
4211242118
$7.each(["hours", "minutes", "seconds"], function() {
42113-
const list2 = picker.find(`.sel-${this}`);
42119+
const list = picker.find(`.sel-${this}`);
4211442120
const scrollFn = Hooks.useDebounce((e2) => {
4211542121
let target;
4211642122
that.listTimer[this] = null;
42117-
target = Math.round(Math.ceil(list2.scrollTop()) / 40);
42123+
target = Math.round(Math.ceil(list.scrollTop()) / 40);
4211842124
if (this === "hours" && o2.hoursStep) {
4211942125
target *= Number.parseInt(o2.hoursStep);
4212042126
}
@@ -42124,30 +42130,30 @@
4212442130
if (this === "seconds" && o2.secondsStep) {
4212542131
target *= Number.parseInt(o2.secondsStep);
4212642132
}
42127-
const targetElement = list2.find(`.js-${this}-${target}`);
42133+
const targetElement = list.find(`.js-${this}-${target}`);
4212842134
const scrollTop = targetElement.position().top - o2.distance * 40;
42129-
list2.find(".active").removeClass("active");
42130-
list2[0].scrollTop = scrollTop;
42135+
list.find(".active").removeClass("active");
42136+
list[0].scrollTop = scrollTop;
4213142137
targetElement.addClass("active");
42132-
Metro2.utils.exec(o2.onScroll, [targetElement, list2, picker], list2[0]);
42138+
Metro2.utils.exec(o2.onScroll, [targetElement, list, picker], list[0]);
4213342139
}, scrollLatency);
42134-
list2.on("scroll", scrollFn);
42140+
list.on("scroll", scrollFn);
4213542141
});
4213642142
picker.on(Metro2.events.click, "ul li", function(e2) {
4213742143
const target = $7(this);
42138-
const list2 = target.closest("ul");
42144+
const list = target.closest("ul");
4213942145
const scrollTop = target.position().top - o2.distance * 40;
42140-
list2.find(".active").removeClass("active");
42146+
list.find(".active").removeClass("active");
4214142147
$7.animate({
42142-
el: list2[0],
42148+
el: list[0],
4214342149
draw: {
4214442150
scrollTop
4214542151
},
4214642152
dur: 300
4214742153
});
42148-
list2[0].scrollTop = scrollTop;
42154+
list[0].scrollTop = scrollTop;
4214942155
target.addClass("active");
42150-
Metro2.utils.exec(o2.onScroll, [target, list2, picker], list2[0]);
42156+
Metro2.utils.exec(o2.onScroll, [target, list, picker], list[0]);
4215142157
});
4215242158
picker.on(Metro2.events.click, ".action-now", (e2) => {
4215342159
const now = datetime();
@@ -42222,10 +42228,10 @@
4222242228
select_wrapper.parent().addClass("drop-up-select");
4222342229
}
4222442230
}
42225-
const animateList = (list2, item) => {
42226-
list2.scrollTop(0).animate({
42231+
const animateList = (list, item) => {
42232+
list.scrollTop(0).animate({
4222742233
draw: {
42228-
scrollTop: item.position().top - o2.distance * 40 + list2.scrollTop()
42234+
scrollTop: item.position().top - o2.distance * 40 + list.scrollTop()
4222942235
},
4223042236
dur: 100
4223142237
});

0 commit comments

Comments
 (0)