devs/emoji-picker-element
4
0
Fork 0
mirror of https://github.com/nolanlawson/emoji-picker-element.git synced 2024-06-12 04:59:29 +02:00
Code Issues Projects Releases Wiki Activity

fix: simpler solution to avoid svelte invalidations (#303)

Browse source 
* fix: simpler solution to avoid svelte invalidations

* fix: improve comment
This commit is contained in:
Nolan Lawson 2022-12-18 12:47:19 -08:00 committed by GitHub
parent c519529ced
commit 4af86a8b54
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/picker/components/Picker/Picker.js
View file

@ -22,6 +22,7 @@ import { requestPostAnimationFrame } from '../../utils/requestPostAnimationFrame
import { tick } from 'svelte'
import { requestAnimationFrame } from '../../utils/requestAnimationFrame'
import { uniq } from '../../../shared/uniq'
import { resetScrollTopIfPossible } from '../../utils/resetScrollTopIfPossible.js'
// public
export let skinToneEmoji
@ -302,15 +303,8 @@ $: {
requestAnimationFrame(() => checkZwjSupportAndUpdate(zwjEmojisToCheck))
} else {
currentEmojis = currentEmojis.filter(isZwjSupported)
requestAnimationFrame(() => {
// Avoid Svelte doing an invalidation on the "setter" here.
// At best the invalidation is useless, at worst it can cause infinite loops:
// https://github.com/nolanlawson/emoji-picker-element/pull/180
// https://github.com/sveltejs/svelte/issues/6521
// Also note tabpanelElement can be null if the element is disconnected
// immediately after connected, hence `|| {}`
(tabpanelElement || {}).scrollTop = 0 // reset scroll top to 0 when emojis change
})
// Reset scroll top to 0 when emojis change
requestAnimationFrame(() => resetScrollTopIfPossible(tabpanelElement))
}
}

10
src/picker/utils/resetScrollTopIfPossible.js Normal file
View file

@ -0,0 +1,10 @@
// Note we put this in its own function outside Picker.js to avoid Svelte doing an invalidation on the "setter" here.
// At best the invalidation is useless, at worst it can cause infinite loops:
// https://github.com/nolanlawson/emoji-picker-element/pull/180
// https://github.com/sveltejs/svelte/issues/6521
// Also note tabpanelElement can be null if the element is disconnected immediately after connected
export function resetScrollTopIfPossible (element) {
if (element) {
element.scrollTop = 0
}
}