Merge pull request #868 from kyle-w-20230331/main

[fix] matchMedia memory leak
missive · Jan 6, 2024 · 21a2708 · 21a2708
2 parents c57635f + 43abe6b
commit 21a2708
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/packages/emoji-mart/src/components/Picker/Picker.tsx b/packages/emoji-mart/src/components/Picker/Picker.tsx
@@ -127,6 +127,7 @@ export default class Picker extends Component {
 
  unregister() {
  document.removeEventListener('click', this.handleClickOutside)
+ this.darkMedia?.removeEventListener('change', this.darkMediaCallback)
  this.unobserve()
  }
 
@@ -194,17 +195,19 @@ export default class Picker extends Component {
  }
  }
 
+ darkMediaCallback = () => {
+ if (this.props.theme != 'auto') return
+ this.setState({ theme: this.darkMedia.matches ? 'dark' : 'light' })
+ }
+
  initTheme(theme) {
  if (theme != 'auto') return theme
 
  if (!this.darkMedia) {
  this.darkMedia = matchMedia('(prefers-color-scheme: dark)')
  if (this.darkMedia.media.match(/^not/)) return 'light'
 
- this.darkMedia.addListener(() => {
- if (this.props.theme != 'auto') return
- this.setState({ theme: this.darkMedia.matches ? 'dark' : 'light' })
- })
+ this.darkMedia.addEventListener('change', this.darkMediaCallback)
  }
 
  return this.darkMedia.matches ? 'dark' : 'light'