From 470e5c4c38838c3f096547a341c3ff7f078898ba Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 18 Dec 2022 12:39:03 -0800 Subject: [PATCH 1/2] fix: simpler solution to avoid svelte invalidations --- src/picker/components/Picker/Picker.js | 11 ++--------- src/picker/utils/resetScrollTopIfPossible.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 9 deletions(-) create mode 100644 src/picker/utils/resetScrollTopIfPossible.js diff --git a/src/picker/components/Picker/Picker.js b/src/picker/components/Picker/Picker.js index 3451436a..fc87950f 100644 --- a/src/picker/components/Picker/Picker.js +++ b/src/picker/components/Picker/Picker.js @@ -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,7 @@ $: { 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 - }) + requestAnimationFrame(() => resetScrollTopIfPossible(tabpanelElement)) } } diff --git a/src/picker/utils/resetScrollTopIfPossible.js b/src/picker/utils/resetScrollTopIfPossible.js new file mode 100644 index 00000000..f1ed9291 --- /dev/null +++ b/src/picker/utils/resetScrollTopIfPossible.js @@ -0,0 +1,11 @@ +// Reset scroll top to 0 when emojis change +// 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 + } +} From 4ed924b194308ae6b010294411fb9cd57aef1766 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sun, 18 Dec 2022 12:40:13 -0800 Subject: [PATCH 2/2] fix: improve comment --- src/picker/components/Picker/Picker.js | 1 + src/picker/utils/resetScrollTopIfPossible.js | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/src/picker/components/Picker/Picker.js b/src/picker/components/Picker/Picker.js index fc87950f..6b46999f 100644 --- a/src/picker/components/Picker/Picker.js +++ b/src/picker/components/Picker/Picker.js @@ -303,6 +303,7 @@ $: { requestAnimationFrame(() => checkZwjSupportAndUpdate(zwjEmojisToCheck)) } else { currentEmojis = currentEmojis.filter(isZwjSupported) + // Reset scroll top to 0 when emojis change requestAnimationFrame(() => resetScrollTopIfPossible(tabpanelElement)) } } diff --git a/src/picker/utils/resetScrollTopIfPossible.js b/src/picker/utils/resetScrollTopIfPossible.js index f1ed9291..31ffbbc8 100644 --- a/src/picker/utils/resetScrollTopIfPossible.js +++ b/src/picker/utils/resetScrollTopIfPossible.js @@ -1,4 +1,3 @@ -// Reset scroll top to 0 when emojis change // 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