Fixes #1285 - SF

packages/clay-labels-input-field/src/ClayLabelsInputField.js

@@ -77,8 +77,9 @@ class ClayLabelsInputField extends ClayComponent {
 
 		if (
 			label.trim() &&
-			!this.selectedLabels
-				.find((labelSelected) => labelSelected.label === label)
+			!this.selectedLabels.find(
+				labelSelected => labelSelected.label === label
+			)
 		) {
 			return !this.emit({
 				data: {
@@ -102,15 +103,17 @@ class ClayLabelsInputField extends ClayComponent {
 	_handleLabelFocus(event, direction) {
 		if (this.selectedLabels.length) {
 			const {formGroupInput} = this.refs;
-			const items = formGroupInput.querySelectorAll('span[id="item-tag"]');
+			const items = formGroupInput.querySelectorAll(
+				'span[id="item-tag"]'
+			);
 
 			if (this._labelFocused) {
 				const index = this._labelFocused.getAttribute('data-tag');
 				const condition = direction
 					? Number(index) - 1
 					: Number(index) + 1;
 
-				if (condition > (items.length - 1)) {
+				if (condition > items.length - 1) {
 					this.refs.input.focus();
 					this._removeFocusedLabel();
 					return false;
@@ -242,15 +245,17 @@ class ClayLabelsInputField extends ClayComponent {
 	 */
 	_setFocusItemDropdown(direction) {
 		if (this.filteredItems.length) {
-			const elements = this.refs.dropdown.querySelectorAll('a[id="item"]');
+			const elements = this.refs.dropdown.querySelectorAll(
+				'a[id="item"]'
+			);
 
 			if (direction && this._dropdownItemFocused === 0) {
 				this.refs.input.focus();
 				this._dropdownItemFocused = null;
 			} else {
 				this._dropdownItemFocused =
-					this._dropdownItemFocused === null
-					|| (elements.length - 1) === this._dropdownItemFocused
+					this._dropdownItemFocused === null ||
+					elements.length - 1 === this._dropdownItemFocused
 						? 0
 						: direction
 							? this._dropdownItemFocused - 1
@@ -378,12 +383,12 @@ ClayLabelsInputField.STATE = {
 	helpText: Config.string().required(),
 
 	/**
-     * Id to be applied to the element.
-     * @default undefined
-     * @instance
-     * @memberof ClayLabelsInputField
-     * @type {?(string|undefined)}
-     */
+	 * Id to be applied to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayLabelsInputField
+	 * @type {?(string|undefined)}
+	 */
 	id: Config.string(),
 
 	/**

packages/clay-labels-input-field/src/ClayLabelsInputField.soy

@@ -4,6 +4,7 @@
  * This renders the component's whole content.
  */
 {template .render}
+	{@param helpText: string}
 	{@param spritemap: string}
 	{@param? _handleButtonClicked: any}
 	{@param? _handleCloseButtonClick: any}
@@ -14,7 +15,6 @@
 	{@param? contentRenderer: string}
 	{@param? elementClasses: string}
 	{@param? filteredItems: list<?>}
-	{@param? helpText: string}
 	{@param? id: string}
 	{@param? label: string}
 	{@param? selectedLabels: list<?>}
@@ -53,6 +53,7 @@
 {/template}
 
 {template .content}
+	{@param helpText: string}
 	{@param spritemap: string}
 	{@param? _handleButtonClicked: any}
 	{@param? _handleCloseButtonClick: any}
@@ -62,7 +63,6 @@
 	{@param? _removeFocusedLabel: any}
 	{@param? contentRenderer: string}
 	{@param? filteredItems: list<?>}
-	{@param? helpText: string}
 	{@param? selectedLabels: list<?>}
 
 	<div class="input-group input-group-stacked-sm-down">
@@ -111,7 +111,7 @@
 				</ul>
 			</div>
 
-			{if $helpText and not $isVisible}
+			{if not $isVisible}
 				<div class="form-feedback-group">
 					<div class="form-text">
 						{$helpText}

packages/clay-labels-input-field/src/utils.js

@@ -32,7 +32,7 @@ export const match = (query, string) => {
 	}
 
 	if (queryIndex === query.length) {
-		totalScore = (string === query) ? Infinity : totalScore;
+		totalScore = string === query ? Infinity : totalScore;
 		return {values: result, score: totalScore};
 	}