You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/04/22 16:58:34 UTC

[royale-asjs] branch develop updated: jewel-list: add better key management, now we can use left and right keys, also avoid affect tab key to allow navigate through other components. renderers now get focus

This is an automated email from the ASF dual-hosted git repository.

carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git


The following commit(s) were added to refs/heads/develop by this push:
     new 25ce12b  jewel-list: add better key management, now we can use left and right keys, also avoid affect tab key to allow navigate through other components. renderers now get focus
25ce12b is described below

commit 25ce12b74fe816d4c516c11fd907d6526a4fb057
Author: Carlos Rovira <ca...@apache.org>
AuthorDate: Wed Apr 22 18:58:29 2020 +0200

    jewel-list: add better key management, now we can use left and right keys, also avoid affect tab key to allow navigate through other components. renderers now get focus
---
 .../Jewel/src/main/royale/org/apache/royale/jewel/List.as    |  3 +++
 .../royale/org/apache/royale/jewel/beads/views/ListView.as   | 12 ++++++++++--
 .../apache/royale/jewel/itemRenderers/ListItemRenderer.as    |  2 +-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
index 8c49850..08dadeb 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/List.as
@@ -28,6 +28,7 @@ package org.apache.royale.jewel
 	import org.apache.royale.jewel.supportClasses.container.DataContainerBase;
 	import org.apache.royale.jewel.supportClasses.list.IListPresentationModel;
 	import org.apache.royale.jewel.beads.views.IScrollToIndexView;
+	import org.apache.royale.events.Event;
 
 	/**
 	 *  Indicates that the initialization of the list is complete.
@@ -83,6 +84,8 @@ package org.apache.royale.jewel
             typeNames = "jewel list";
 			// rowHeight is not set by default, so set it to NaN
 			rowHeight = NaN;
+
+			tabIndex = 0;
 		}
 
         [Bindable("labelFieldChanged")]
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
index 31c73bf..0703f84 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/beads/views/ListView.as
@@ -39,6 +39,7 @@ package org.apache.royale.jewel.beads.views
 	import org.apache.royale.jewel.beads.models.ListPresentationModel;
 	import org.apache.royale.jewel.supportClasses.list.IListPresentationModel;
 	import org.apache.royale.utils.getSelectionRenderBead;
+	import org.apache.royale.core.StyledUIBase;
 
 	/**
 	 *  The ListView class creates the visual elements of the org.apache.royale.jewel.List
@@ -101,16 +102,20 @@ package org.apache.royale.jewel.beads.views
 		 */
 		protected function keyEventHandler(event:KeyboardEvent):void
 		{
+			// avoid Tab loose the normal behaviour, for navigation we don't want build int scrolling support in browsers
+			if(event.key === KeyboardEvent.KEYCODE__TAB)
+				return;
+			
 			event.preventDefault();
 
 			var prevIndex:int = listModel.selectedIndex;
 
-			if(event.key === KeyboardEvent.KEYCODE__UP)
+			if(event.key === KeyboardEvent.KEYCODE__UP || event.key === KeyboardEvent.KEYCODE__LEFT)
 			{
 				if(prevIndex > 0)
 					listModel.selectedIndex -=1;
 			} 
-			else if(event.key === KeyboardEvent.KEYCODE__DOWN)
+			else if(event.key === KeyboardEvent.KEYCODE__DOWN || event.key === KeyboardEvent.KEYCODE__RIGHT)
 			{
 				listModel.selectedIndex +=1;
 			}
@@ -119,6 +124,9 @@ package org.apache.royale.jewel.beads.views
 			{
 				selectionChangeHandler(null);
 				scrollToIndex(listModel.selectedIndex);
+
+				var ir:StyledUIBase = dataGroup.getItemRendererForIndex(listModel.selectedIndex) as StyledUIBase;
+				ir.setFocus();
 			}
 		}
 
diff --git a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
index 73de827..b41b09e 100644
--- a/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
+++ b/frameworks/projects/Jewel/src/main/royale/org/apache/royale/jewel/itemRenderers/ListItemRenderer.as
@@ -140,7 +140,7 @@ package org.apache.royale.jewel.itemRenderers
         override protected function createElement():WrappedHTMLElement
         {
 			addElementToWrapper(this, 'li');
-			element.tabIndex = 0;
+			// tabIndex = -1;
             return element;
         }
 	}