fix: use span for non-clickable emojis

missive · Mar 28, 2019 · 4fda4dc · 4fda4dc
1 parent abc2cda
commit 4fda4dc
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 7 deletions.
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 = {