Removed default highlight from context menu

Resolves brave#6867 Auditors: @bsclifton @bbondy Test Plan: -specified in brave#6867
NejcZdovc · Jan 27, 2017 · 061ad16 · 061ad16
1 parent 43f2a78
commit 061ad16
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 17 deletions.
diff --git a/js/components/contextMenu.js b/js/components/contextMenu.js
@@ -253,18 +253,27 @@ class ContextMenu extends ImmutableComponent {
   }
 
   onKeyDown (e) {
-    const selectedIndex = (this.props.selectedIndex === null) ? [0] : this.props.selectedIndex
-    const currentIndex = selectedIndex[selectedIndex.length - 1]
-    const selectedTemplate = this.getMenuByIndex(selectedIndex, this.props.contextMenuDetail.get('template'))
-    const selectedMenuItem = selectedTemplate.get(currentIndex)
+    let selectedIndex = null
+    let currentIndex = null
+    let selectedTemplate = null
+    let selectedMenuItem = null
+
+    if (this.props.selectedIndex !== null) {
+      selectedIndex = this.props.selectedIndex
+      currentIndex = selectedIndex[selectedIndex.length - 1]
+      selectedTemplate = this.getMenuByIndex(selectedIndex, this.props.contextMenuDetail.get('template'))
+      selectedMenuItem = selectedTemplate.get(currentIndex)
+    }
 
     switch (e.keyCode) {
       case keyCodes.ENTER:
         e.preventDefault()
         e.stopPropagation()
-        const action = selectedTemplate.getIn([currentIndex, 'click'])
-        if (action) {
-          action(e)
+        if (currentIndex !== null) {
+          const action = selectedTemplate.getIn([currentIndex, 'click'])
+          if (action) {
+            action(e)
+          }
         }
         windowActions.resetMenuState()
         break
@@ -321,13 +330,20 @@ class ContextMenu extends ImmutableComponent {
       case keyCodes.UP:
       case keyCodes.DOWN:
         if (this.props.contextMenuDetail) {
-          const nextIndex = wrappingClamp(
-            currentIndex + (e.which === keyCodes.UP ? -1 : 1),
-            0,
-            this.maxIndex(selectedTemplate))
+          let newIndices
+
+          if (selectedIndex === null) {
+            newIndices = [0]
+          } else {
+            const nextIndex = wrappingClamp(
+              currentIndex + (e.which === keyCodes.UP ? -1 : 1),
+              0,
+              this.maxIndex(selectedTemplate))
+
+            newIndices = selectedIndex.slice()
+            newIndices[selectedIndex.length - 1] = nextIndex
+          }
 
-          const newIndices = selectedIndex.slice()
-          newIndices[selectedIndex.length - 1] = nextIndex
           windowActions.setContextMenuSelectedIndex(newIndices)
         }
         break
@@ -427,7 +443,7 @@ class ContextMenu extends ImmutableComponent {
         submenuIndex={0}
         lastZoomPercentage={this.props.lastZoomPercentage}
         template={this.props.contextMenuDetail.get('template')}
-        selectedIndex={selectedIndex[0]} />
+        selectedIndex={this.props.selectedIndex ? this.props.selectedIndex[0] : null} />
       {
         this.openedSubmenuDetails.map((openedSubmenuDetail, i) =>
           <ContextMenuSingle contextMenuDetail={this.props.contextMenuDetail}

diff --git a/test/components/contextMenuTest.js b/test/components/contextMenuTest.js
@@ -64,7 +64,7 @@ describe('ContextMenu', function () {
         .pause(10)
         .tabByUrl(this.formfill)
         .getValue('[name="02frstname"]').should.eventually.be.equal('Test value')
-        .getValue(this.input).should.eventually.be.equal(this.values[2])
+        .getValue(this.input).should.eventually.be.equal(this.values[1])
     })
 
     it('click on item', function *() {
@@ -97,7 +97,7 @@ describe('ContextMenu', function () {
         .keys('\uE007')
         .pause(10)
         .tabByUrl(this.formfill)
-        .getValue(this.input).should.eventually.be.equal(this.values[2])
+        .getValue(this.input).should.eventually.be.equal(this.values[1])
     })
 
     it('select item via keys only', function *() {
@@ -122,7 +122,7 @@ describe('ContextMenu', function () {
         .keys('\uE007')
         .pause(10)
         .tabByUrl(this.formfill)
-        .getValue(this.input).should.eventually.be.equal(this.values[3])
+        .getValue(this.input).should.eventually.be.equal(this.values[2])
     })
 
     it('check left/right on non sub menu item', function *() {
@@ -146,6 +146,8 @@ describe('ContextMenu', function () {
         .pause(10)
         .keys('\uE015')
         .pause(10)
+        .keys('\uE015')
+        .pause(10)
         .keys('\uE007')
         .pause(10)
         .tabByUrl(this.formfill)