Fix emoji-mart crashing web UI on search by reverting the upgrade to 2.10.0 (#10413)

Fix #10315

This reverts commit db06b25376ac7e844e86fb9890fa9f1c2edd2d60.

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

@@ -50,7 +50,6 @@ class ModifierPickerMenu extends React.PureComponent {
     active: PropTypes.bool,
     onSelect: PropTypes.func.isRequired,
     onClose: PropTypes.func.isRequired,
-    modifier: PropTypes.number,
   };
 
   handleClick = e => {
@@ -87,36 +86,20 @@ class ModifierPickerMenu extends React.PureComponent {
 
   setRef = c => {
     this.node = c;
-    if (this.node) {
-      this.node.querySelector('li:first-child button').focus(); // focus the first element when opened
-    }
   }
 
   render () {
-    const { active, modifier } = this.props;
+    const { active } = this.props;
 
     return (
-      <ul
-        className='emoji-picker-dropdown__modifiers__menu'
-        style={{ display: active ? 'block' : 'none' }}
-        role='menuitem'
-        ref={this.setRef}
-      >
-        {[1, 2, 3, 4, 5, 6].map(i => (
-          <li
-            onClick={this.handleClick}
-            role='menuitemradio'
-            aria-checked={i === (modifier || 1)}
-            data-index={i}
-            key={i}
-          >
-            <Emoji
-              emoji='fist' set='twitter' size={22} sheetSize={32} skin={i}
-              backgroundImageFn={backgroundImageFn}
-            />
-          </li>
-        ))}
-      </ul>
+      <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={this.setRef}>
+        <button onClick={this.handleClick} data-index={1}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} /></button>
+        <button onClick={this.handleClick} data-index={2}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} /></button>
+        <button onClick={this.handleClick} data-index={3}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} /></button>
+        <button onClick={this.handleClick} data-index={4}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} /></button>
+        <button onClick={this.handleClick} data-index={5}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} /></button>
+        <button onClick={this.handleClick} data-index={6}><Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} /></button>
+      </div>
     );
   }
 
@@ -148,22 +131,10 @@ class ModifierPicker extends React.PureComponent {
   render () {
     const { active, modifier } = this.props;
 
-    function setRef(ref) {
-      if (!ref) {
-        return;
-      }
-      // TODO: It would be nice if we could pass props directly to emoji-mart's buttons.
-      const button = ref.querySelector('button');
-      button.setAttribute('aria-haspopup', 'true');
-      button.setAttribute('aria-expanded', active);
-    }
-
     return (
       <div className='emoji-picker-dropdown__modifiers'>
-        <div ref={setRef}>
-          <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
-        </div>
-        <ModifierPickerMenu active={active} modifier={modifier} onSelect={this.handleSelect} onClose={this.props.onClose} />
+        <Emoji emoji='fist' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={this.handleClick} backgroundImageFn={backgroundImageFn} />
+        <ModifierPickerMenu active={active} onSelect={this.handleSelect} onClose={this.props.onClose} />
       </div>
     );
   }

app/javascript/mastodon/features/emoji/emoji_picker.js

@@ -1,5 +1,5 @@
-import Picker from 'emoji-mart/dist-modern/components/picker/picker';
-import Emoji from 'emoji-mart/dist-modern/components/emoji/emoji';
+import Picker from 'emoji-mart/dist-es/components/picker/picker';
+import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
 
 export {
   Picker,

app/javascript/styles/mastodon/components.scss

@@ -3226,11 +3226,11 @@ a.status-card.compact:hover {
   box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
   overflow: hidden;
 
-  li {
+  button {
     display: block;
     cursor: pointer;
     border: 0;
-    padding: 3px 8px;
+    padding: 4px 8px;
     background: transparent;
 
     &:hover,

app/javascript/styles/mastodon/emoji_picker.scss

@@ -1,5 +1,3 @@
-@import '../../../node_modules/emoji-mart/css/emoji-mart.css';
-
 .emoji-mart {
   &,
   * {
@@ -53,14 +51,6 @@
 
   &:hover {
     color: darken($lighter-text-color, 4%);
-
-    svg {
-      fill: darken($lighter-text-color, 4%);
-    }
-  }
-
-  svg {
-    fill: $lighter-text-color;
   }
 }
 
@@ -69,19 +59,11 @@
 
   &:hover {
     color: darken($highlight-text-color, 4%);
-
-    svg {
-      fill: darken($highlight-text-color, 4%);
-    }
   }
 
   .emoji-mart-anchor-bar {
     bottom: -1px;
   }
-
-  svg {
-    fill: $highlight-text-color;
-  }
 }
 
 .emoji-mart-anchor-bar {
@@ -101,6 +83,7 @@
   }
 
   svg {
+    fill: currentColor;
     max-height: 18px;
   }
 }
@@ -120,14 +103,15 @@
 }
 
 .emoji-mart-search {
-  margin: 10px 40px 10px 5px;
+  padding: 10px;
+  padding-right: 45px;
   background: $simple-background-color;
 
   input {
     font-size: 14px;
     font-weight: 400;
     padding: 7px 9px;
-    font-family: $font-sans-serif;
+    font-family: inherit;
     display: block;
     width: 100%;
     background: rgba($ui-secondary-color, 0.3);
@@ -182,7 +166,6 @@
     font-weight: 500;
     padding: 5px 6px;
     background: $simple-background-color;
-    font-family: $font-sans-serif;
   }
 }
 

config/webpack/rules/node_modules.js

@@ -11,16 +11,7 @@ module.exports = {
       options: {
         babelrc: false,
         plugins: [
-          [
-            'transform-react-remove-prop-types',
-            {
-              mode: 'remove',
-              removeImport: true,
-              additionalLibraries: [
-                '../../utils/shared-props', // emoji-mart
-              ],
-            },
-          ],
+          'transform-react-remove-prop-types',
         ],
         cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
         cacheCompression: env.NODE_ENV === 'production',

package.json

@@ -85,7 +85,7 @@
     "cssnano": "^4.1.10",
     "detect-passive-events": "^1.0.2",
     "dotenv": "^6.2.0",
-    "emoji-mart": "^2.10.0",
+    "emoji-mart": "Gargron/emoji-mart#build",
     "es6-symbol": "^3.1.1",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",

yarn.lock

@@ -3173,12 +3173,9 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-emoji-mart@^2.10.0:
-  version "2.10.0"
-  resolved "https://registry.yarnpkg.com/emoji-mart/-/emoji-mart-2.10.0.tgz#e1adec430f4963f79055b12b80e6d60c5abb742d"
-  integrity sha512-VhcX463f8TDaQc1Tpc8rI31E15+8KXOYff1vwjokjMT52bZlCQCyq3zrnNScSYjv95f1+R4DMMreeuPvYFvOhg==
-  dependencies:
-    prop-types "^15.6.0"
+emoji-mart@Gargron/emoji-mart#build:
+  version "2.6.2"
+  resolved "https://codeload.github.com/Gargron/emoji-mart/tar.gz/ff00dc470b5b2d9f145a6d6e977a54de5df2b4c9"
 
 emoji-regex@^6.5.1:
   version "6.5.1"