Fixes liferay#1285 - Add inputName to API

matuzalemsteles · Dec 4, 2018 · 131ca6f · 131ca6f
1 parent 2a3c545
commit 131ca6f
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/packages/clay-multi-select/src/ClayMultiSelect.js b/packages/clay-multi-select/src/ClayMultiSelect.js
@@ -391,6 +391,15 @@ ClayMultiSelect.STATE = {
 	 */
 	id: Config.string(),
 
+	/**
+	 * Name of the input.
+	 * @default undefind
+	 * @instance
+	 * @memberof ClayMultiSelect
+	 * @type {?(string|undefined)}
+	 */
+	inputName: Config.string(),
+
 	/**
 	 * Label of the input element.
 	 * @default undefined

diff --git a/packages/clay-multi-select/src/ClayMultiSelect.soy b/packages/clay-multi-select/src/ClayMultiSelect.soy
@@ -16,6 +16,7 @@
 	{@param? elementClasses: string}
 	{@param? filteredItems: list<?>}
 	{@param? id: string}
+	{@param? inputName: string}
 	{@param? label: string}
 	{@param? selectedItems: list<?>}
 
@@ -33,7 +34,13 @@
 
 	<div {$attributes}>
 		{if $label}
-			<label>{$label}</label>
+			{let $labelAttributes kind="attributes"}
+				{if $inputName}
+					for="{$inputName}"
+				{/if}
+			{/let}
+
+			<label {$labelAttributes}>{$label}</label>
 		{/if}
 
 		{call .content}
@@ -46,6 +53,7 @@
 			{param contentRenderer: $contentRenderer /}
 			{param filteredItems: $filteredItems /}
 			{param helpText: $helpText /}
+			{param inputName: $inputId /}
 			{param selectedItems: $selectedItems /}
 			{param spritemap: $spritemap /}
 		{/call}
@@ -63,8 +71,24 @@
 	{@param? _removeFocusedItem: any}
 	{@param? contentRenderer: string}
 	{@param? filteredItems: list<?>}
+	{@param? inputName: string}
 	{@param? selectedItems: list<?>}
 
+	{let $inputAttributes kind="attributes"}
+		class="form-control-inset"
+		{if $inputName}
+			id="{$inputName}"
+			name="{$inputName}"
+		{/if}
+
+		onBlur="{$_removeFocusedItem}"
+		onFocus="{$_removeFocusedItem}"
+		onInput="{$_handleOnInput}"
+		onKeydown="{$_handleOnKeydown}"
+		ref="input"
+		type="text"
+	{/let}
+
 	<div class="input-group input-group-stacked-sm-down">
 		<div class="input-group-item">
 			<div data-keydown="{$_handleOnKeydown}" ref="formGroupInput" class="form-control dropdown-full form-control-tag-group">
@@ -77,15 +101,7 @@
 					{/call}
 				{/if}
 
-				<input
-					class="form-control-inset"
-					onBlur="{$_removeFocusedItem}"
-					onFocus="{$_removeFocusedItem}"
-					onInput="{$_handleOnInput}"
-					onKeydown="{$_handleOnKeydown}"
-					ref="input"
-					type="text"
-				/>
+				<input {$inputAttributes} />
 
 				{let $isVisible: $filteredItems and length($filteredItems) > 0 ? true : false /}