From 4fda4dcc01e4f232c31b2a990d4a6c83f21ed6be Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Thu, 28 Mar 2019 08:30:18 -0400
Subject: [PATCH] fix: use span for non-clickable emojis

---
 src/components/emoji/nimble-emoji.js | 21 +++++++++++++++++----
 src/utils/shared-default-props.js    |  3 ---
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/emoji/nimble-emoji.js b/src/components/emoji/nimble-emoji.js
index 13f6017..0991d86 100644
--- 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
index 489869b..0517746 100644
--- 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 = {