Change move-control buttons to divs to prevent draft-js selection (#303)

globocom · Feb 19, 2020 · 40ca061 · 40ca061
1 parent 76ebeac
commit 40ca061
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git a/src/components/MoveControl.js b/src/components/MoveControl.js
@@ -24,30 +24,36 @@ const Options = ({
   };
   return (
     <div className="options">
-      <button
+      <div
         data-testid={`swap-up-${id}`}
-        className="options__button options__button--up"
+        className={
+          disableUp
+            ? "options__button options__button--up options__button--disabled"
+            : "options__button options__button--up"
+        }
         onClick={() => {
           onAction({ type: BLOCK_SWAP_UP, blockId: id });
           onClickUp();
         }}
-        disabled={disableUp}
         onPointerDown={onPointerDown}
       >
         <icons.DropdownArrow />
-      </button>
-      <button
+      </div>
+      <div
         data-testid={`swap-down-${id}`}
-        className="options__button"
+        className={
+          disableDown
+            ? "options__button options__button--disabled"
+            : "options__button"
+        }
         onClick={() => {
           onAction({ type: BLOCK_SWAP_DOWN, blockId: id });
           onClickDown();
         }}
-        disabled={disableDown}
         onPointerDown={onPointerDown}
       >
         <icons.DropdownArrow />
-      </button>
+      </div>
     </div>
   );
 };

diff --git a/src/styles/move-control.scss b/src/styles/move-control.scss
@@ -47,26 +47,32 @@
   background-color: #eee;
   opacity: 0;
   transition: margin 0.3s;
+  cursor: default;
 }
 
 .options__button {
   border: 0;
-  cursor: pointer;
   height: 24px;
   width: 24px;
   font-size: 0;
   padding: 0;
   outline: none;
   background: none;
+  cursor: pointer;
+}
+
+.options__button--disabled {
+  pointer-events: none;
+  opacity: 0.5;
 }
 
-.options__button:hover:enabled {
+.options__button:hover {
   background: rgba(33,33,33,0.08);
   transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
   border-radius: 50%;
 }
 
-.options__button:active:enabled {
+.options__button:active {
   background: rgba(33,33,33,0.16); 
 }