svelte-multiselect 5.0.5 → 5.0.6
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.
- package/MultiSelect.svelte +5 -4
- package/index.js +21 -0
- package/package.json +1 -2
package/MultiSelect.svelte
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
<script>import
|
|
2
|
-
import { createEventDispatcher } from 'svelte';
|
|
1
|
+
<script>import { createEventDispatcher } from 'svelte';
|
|
3
2
|
import { get_label, get_value } from './';
|
|
4
3
|
import CircleSpinner from './CircleSpinner.svelte';
|
|
5
4
|
import { CrossIcon, DisabledIcon, ExpandIcon } from './icons';
|
|
@@ -233,8 +232,10 @@ async function handleKeydown(event) {
|
|
|
233
232
|
// around start/end of option list. Find a better solution than waiting 10 ms to.
|
|
234
233
|
setTimeout(() => {
|
|
235
234
|
const li = document.querySelector(`ul.options > li.active`);
|
|
236
|
-
if (li)
|
|
237
|
-
scrollIntoView(
|
|
235
|
+
if (li) {
|
|
236
|
+
li.parentNode?.scrollIntoView({ block: `center` });
|
|
237
|
+
li.scrollIntoViewIfNeeded();
|
|
238
|
+
}
|
|
238
239
|
}, 10);
|
|
239
240
|
}
|
|
240
241
|
}
|
package/index.js
CHANGED
|
@@ -3,3 +3,24 @@ export { default } from './MultiSelect.svelte';
|
|
|
3
3
|
export const get_label = (op) => (op instanceof Object ? op.label : op);
|
|
4
4
|
// fallback on label if option is object and value is undefined
|
|
5
5
|
export const get_value = (op) => op instanceof Object ? op.value ?? op.label : op;
|
|
6
|
+
// Firefox lacks support for scrollIntoViewIfNeeded, see
|
|
7
|
+
// https://github.com/janosh/svelte-multiselect/issues/87
|
|
8
|
+
// this polyfill was copied from
|
|
9
|
+
// https://github.com/nuxodin/lazyfill/blob/a8e63/polyfills/Element/prototype/scrollIntoViewIfNeeded.js
|
|
10
|
+
if (typeof Element !== `undefined` &&
|
|
11
|
+
!Element.prototype?.scrollIntoViewIfNeeded) {
|
|
12
|
+
Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded = true) {
|
|
13
|
+
const el = this;
|
|
14
|
+
new IntersectionObserver(function ([entry]) {
|
|
15
|
+
const ratio = entry.intersectionRatio;
|
|
16
|
+
if (ratio < 1) {
|
|
17
|
+
const place = ratio <= 0 && centerIfNeeded ? `center` : `nearest`;
|
|
18
|
+
el.scrollIntoView({
|
|
19
|
+
block: place,
|
|
20
|
+
inline: place,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
this.disconnect();
|
|
24
|
+
}).observe(this);
|
|
25
|
+
};
|
|
26
|
+
}
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"homepage": "https://svelte-multiselect.netlify.app",
|
|
6
6
|
"repository": "https://github.com/janosh/svelte-multiselect",
|
|
7
7
|
"license": "MIT",
|
|
8
|
-
"version": "5.0.
|
|
8
|
+
"version": "5.0.6",
|
|
9
9
|
"type": "module",
|
|
10
10
|
"svelte": "index.js",
|
|
11
11
|
"main": "index.js",
|
|
@@ -26,7 +26,6 @@
|
|
|
26
26
|
"prettier-plugin-svelte": "^2.7.0",
|
|
27
27
|
"rehype-autolink-headings": "^6.1.1",
|
|
28
28
|
"rehype-slug": "^5.0.1",
|
|
29
|
-
"scroll-into-view-if-needed": "^2.2.29",
|
|
30
29
|
"svelte": "^3.49.0",
|
|
31
30
|
"svelte-check": "^2.8.0",
|
|
32
31
|
"svelte-github-corner": "^0.1.0",
|