tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix panel dropping issue about input drop-down box

Browse Source
This commit is contained in:
Tsanie Lily 2023-04-01 02:25:10 +08:00
parent 671a075c48
commit 067d6252b2
2 changed files with 17 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lib/ui/dropdown.html
View File

@ -89,11 +89,19 @@
<script type="text/javascript"> <script type="text/javascript">
!function () { !function () {
const Dropdown = window["lib-ui"].Dropdown; const Dropdown = window["lib-ui"].Dropdown;
console.log(Dropdown); const sample = document.querySelector('#dropdown-sample');
Dropdown.resolve(document.querySelector('#dropdown-sample')); Dropdown.resolve(sample);
const drop = new Dropdown({ let drop = new Dropdown({
input: true,
selected: 'standby'
});
drop.source = ['off', 'running', 'standby', 'broken']
.map(it => { return { value: it, text: it } });
sample.appendChild(drop.create());
drop = new Dropdown({
selected: '#ff0', selected: '#ff0',
search: true, search: true,
multiselect: true multiselect: true
@ -114,7 +122,7 @@
span.innerText = it.text; span.innerText = it.text;
it.html = span; it.html = span;
}); });
document.querySelector("#dropdown-sample").appendChild(drop.create()); sample.appendChild(drop.create());
}(); }();
</script> </script>
<style type="text/css"> <style type="text/css">
@ -122,7 +130,7 @@
display: flex; display: flex;
} }
#dropdown-sample > .dropdown-wrapper { #dropdown-sample>.dropdown-wrapper {
width: 200px; width: 200px;
margin-right: 10px; margin-right: 10px;
} }

12
lib/ui/dropdown.js
View File

@ -363,18 +363,14 @@ class Dropdown {
// const event = new InputEvent('type'); // const event = new InputEvent('type');
// inputSearch.dispatchEvent(event); // inputSearch.dispatchEvent(event);
// } // }
if (options.input) { if (!options.input && options.search) {
this.#label.dispatchEvent(new InputEvent('type'));
} else if (options.search) {
const search = panel.querySelector('.dropdown-search > input'); const search = panel.querySelector('.dropdown-search > input');
if (!nullOrEmpty(search?.value)) { if (!nullOrEmpty(search?.value)) {
search.dispatchEvent(new InputEvent('type')); search.dispatchEvent(new InputEvent('type'));
} else { return;
this.#filllist(this.source);
} }
} else {
this.#filllist(this.source);
} }
this.#filllist(this.source);
} else { } else {
panel.classList.remove('active'); panel.classList.remove('active');
} }
@ -507,7 +503,7 @@ class Dropdown {
sel.parentElement.replaceChild(drop.create(), sel); sel.parentElement.replaceChild(drop.create(), sel);
} }
return dom; return dom;
} }
} }
export default Dropdown; export default Dropdown;