Fixes liferay#1341 - Move the onKeydown to root element

matuzalemsteles · Dec 4, 2018 · c8ca3da · c8ca3da
1 parent 60494ba
commit c8ca3da
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/clay-autocomplete/src/ClayAutocomplete.js b/packages/clay-autocomplete/src/ClayAutocomplete.js
@@ -134,14 +134,16 @@ class ClayAutocomplete extends ClayComponent {
 	_handleOnKeydown(event) {
 		switch (event.key) {
 		case 'Enter':
-			if (this.filteredItems.length) {
+			event.stopPropagation();
+			if (this.filteredItems.length && event.delegateTarget.tagName !== 'INPUT') {
 				this._handleItemSelected(event);
 			}
 			break;
 		case 'ArrowUp':
 			this._setFocusItem(true);
 			break;
 		case 'ArrowDown':
+			event.stopPropagation();
 			this._setFocusItem(false);
 			break;
 		}
@@ -171,7 +173,10 @@ class ClayAutocomplete extends ClayComponent {
 			if (direction && this._dropdownItemFocused === 0) {
 				this.refs.input.focus();
 				this._dropdownItemFocused = null;
-			} else {
+			} else if (
+				!(direction === true &&
+				this._dropdownItemFocused === null)
+			) {
 				this._dropdownItemFocused =
 					this._dropdownItemFocused === null ||
 					elements.length - 1 === this._dropdownItemFocused

diff --git a/packages/clay-autocomplete/src/ClayAutocomplete.soy b/packages/clay-autocomplete/src/ClayAutocomplete.soy
@@ -43,6 +43,8 @@
 			{/if}
 		"
 
+		data-onkeydown="{$_handleOnKeydown}"
+
 		{if $id}
 			id="{$id}"
 		{/if}
@@ -64,7 +66,6 @@
 		{call .dropdown}
 			{param _handleDataChange: $_handleDataChange /}
 			{param _handleDropdownItemClick: $_handleDropdownItemClick /}
-			{param _handleOnKeydown: $_handleOnKeydown /}
 			{param contentRenderer: $contentRenderer /}
 			{param dataSource: $dataSource /}
 			{param filteredItems: $filteredItems /}
@@ -127,7 +128,6 @@
 	{@param dataSource: string|[]|list<?>}
 	{@param? _handleDataChange: any}
 	{@param? _handleDropdownItemClick: any}
-	{@param? _handleOnKeydown: any}
 	{@param? contentRenderer: string}
 	{@param? filteredItems: list<?>}
 	{@param? initialData: []|list<?>}
@@ -156,7 +156,7 @@
 
 	{call ClayDataProvider.render}
 		{param content kind="html"}
-			<ul onkeydown="{$_handleOnKeydown}" class="{$classes}" ref="dropdown">
+			<ul class="{$classes}" ref="dropdown">
 				{if $filteredItems}
 					{foreach $item in $filteredItems}
 						{delcall ClayAutocomplete.Item variant="$contentRenderer" allowemptydefault="true"}