DEV: Remove IntersectionObserver polyfill (#13445)

app/assets/javascripts/discourse/app/components/emoji-picker.js

@@ -45,7 +45,9 @@ export default Component.extend({
     this.set("recentEmojis", this.emojiStore.favorites);
     this.set("selectedDiversity", this.emojiStore.diversity);
 
-    this._sectionObserver = this._setupSectionObserver();
+    if ("IntersectionObserver" in window) {
+      this._sectionObserver = this._setupSectionObserver();
+    }
   },
 
   didInsertElement() {
@@ -107,10 +109,6 @@ export default Component.extend({
         );
       }
 
-      emojiPicker
-        .querySelectorAll(".emojis-container .section .section-header")
-        .forEach((p) => this._sectionObserver.observe(p));
-
       // this is a low-tech trick to prevent appending hundreds of emojis
       // of blocking the rendering of the picker
       later(() => {
@@ -123,6 +121,12 @@ export default Component.extend({
           ) {
             const filter = emojiPicker.querySelector("input.filter");
             filter && filter.focus();
+
+            if (this._sectionObserver) {
+              emojiPicker
+                .querySelectorAll(".emojis-container .section .section-header")
+                .forEach((p) => this._sectionObserver.observe(p));
+            }
           }
 
           if (this.selectedDiversity !== 0) {
@@ -216,23 +220,22 @@ export default Component.extend({
 
   @action
   onFilter(event) {
-    const emojiPickerArea = document.querySelector(".emoji-picker-emoji-area");
-    const emojisContainer = emojiPickerArea.querySelector(".emojis-container");
-    const results = emojiPickerArea.querySelector(".results");
+    const emojiPicker = document.querySelector(".emoji-picker");
+    const results = document.querySelector(".emoji-picker-emoji-area .results");
     results.innerHTML = "";
 
     if (event.target.value) {
       results.innerHTML = emojiSearch(event.target.value.toLowerCase(), {
-        maxResults: 10,
+        maxResults: 20,
         diversity: this.emojiStore.diversity,
       })
         .map(this._replaceEmoji)
         .join("");
 
-      emojisContainer.style.visibility = "hidden";
+      emojiPicker.classList.add("has-filter");
       results.scrollIntoView();
     } else {
-      emojisContainer.style.visibility = "visible";
+      emojiPicker.classList.remove("has-filter");
     }
   },
 

app/assets/javascripts/vendor.js

@@ -25,6 +25,5 @@
 //= require jquery.autoellipsis-1.0.10
 //= require virtual-dom
 //= require virtual-dom-amd
-//= require intersection-observer
 //= require discourse-shims
 //= require pretty-text-bundle

app/assets/stylesheets/common/base/emoji.scss

@@ -126,6 +126,22 @@ sup img.emoji {
       }
     }
   }
+
+  &.has-filter {
+    .emojis-container {
+      visibility: hidden;
+      height: 0px;
+      overflow: hidden;
+    }
+
+    .emoji-picker-category-buttons {
+      pointer-events: none;
+      opacity: 0.5;
+      .category-button.current .emoji {
+        filter: grayscale(100%);
+      }
+    }
+  }
 }
 
 .emoji-picker-search-container {