From 44b9f741a3bc4d746505a8ad3ca2e0f3ef6bfc05 Mon Sep 17 00:00:00 2001
From: Najika Yoo <halsema@najikas-mbp.sea.adobe.com>
Date: Mon, 22 Mar 2021 12:21:23 -0700
Subject: [PATCH] fix(color-area): up and down arrows now work properly

---
 packages/color-area/src/ColorArea.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/color-area/src/ColorArea.ts b/packages/color-area/src/ColorArea.ts
index 4c13493cdf..96366f9696 100644
--- a/packages/color-area/src/ColorArea.ts
+++ b/packages/color-area/src/ColorArea.ts
@@ -27,6 +27,8 @@ import { TinyColor } from '@ctrl/tinycolor';
 
 import styles from './color-area.css.js';
 
+const preventDefault = (event: KeyboardEvent) => event.preventDefault();
+
 /**
  * @element sp-color-area
  */
@@ -197,11 +199,11 @@ export class ColorArea extends SpectrumElement {
             switch (code) {
                 case 'ArrowUp':
                 case 'Up':
-                    deltaY = -this.step;
+                    deltaY = this.step * -1;
                     break;
                 case 'ArrowDown':
                 case 'Down':
-                    deltaY = this.step;
+                    deltaY = this.step * 1;
                     break;
                 case 'ArrowLeft':
                 case 'Left':
@@ -388,7 +390,7 @@ export class ColorArea extends SpectrumElement {
                 step=${this.step}
                 .value=${String(this.x)}
                 @input=${this.handleInput}
-                @keyup=${(event: KeyboardEvent) => event.preventDefault()}
+                @keydown=${preventDefault}
             />
             <input
                 type="range"
@@ -400,7 +402,7 @@ export class ColorArea extends SpectrumElement {
                 step=${this.step}
                 .value=${String(this.y)}
                 @input=${this.handleInput}
-                @keyup=${(event: KeyboardEvent) => event.preventDefault()}
+                @keydown=${preventDefault}
             />
         `;
     }