Merge pull request missive#329 from missive/fix-emoji-button

fix: use span for non-clickable emojis
deskpro · Mar 28, 2019 · 9b3a448 · 9b3a448
2 parents abc2cda + 7f05e22
commit 9b3a448
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 9 deletions.
diff --git a/src/components/__tests__/__snapshots__/not-found.test.js.snap b/src/components/__tests__/__snapshots__/not-found.test.js.snap
@@ -4,7 +4,7 @@ exports[`Renders <NotFound> component 1`] = `
 <div
   className="emoji-mart-no-results"
 >
-  <button
+  <span
     aria-label="🕵️, sleuth_or_spy"
     className="emoji-mart-emoji emoji-mart-emoji-native"
     onClick={[Function]}
@@ -25,7 +25,7 @@ exports[`Renders <NotFound> component 1`] = `
     >
       🕵️
     </span>
-  </button>
+  </span>
   <div
     className="emoji-mart-no-results-label"
   >

diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
@@ -177,23 +177,36 @@ const NimbleEmoji = (props) => {
     }
   }
 
+  var Tag = {
+    name: 'span',
+    props: {},
+  }
+
+  if (props.onClick) {
+    Tag.name = 'button'
+    Tag.props = {
+      type: 'button',
+    }
+  }
+
   if (props.html) {
     style = _convertStyleToCSS(style)
-    return `<button style='${style}' aria-label='${label}' ${
+    return `<${Tag.name} style='${style}' aria-label='${label}' ${
       title ? `title='${title}'` : ''
-    } class='${className}'>${children || ''}</button>`
+    } class='${className}'>${children || ''}</${Tag.name}>`
   } else {
     return (
-      <button
+      <Tag.name
         onClick={(e) => _handleClick(e, props)}
         onMouseEnter={(e) => _handleOver(e, props)}
         onMouseLeave={(e) => _handleLeave(e, props)}
         aria-label={label}
         title={title}
         className={className}
+        {...Tag.props}
       >
         <span style={style}>{children}</span>
-      </button>
+      </Tag.name>
     )
   }
 }

diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js
@@ -9,9 +9,6 @@ const EmojiDefaultProps = {
   tooltip: false,
   backgroundImageFn: (set, sheetSize) =>
     `https://unpkg.com/emoji-datasource-${set}@${EMOJI_DATASOURCE_VERSION}/img/${set}/sheets-256/${sheetSize}.png`,
-  onOver: () => {},
-  onLeave: () => {},
-  onClick: () => {},
 }
 
 const PickerDefaultProps = {