AIQ-5472: Review fixes

politico · Sep 27, 2024 · 8be715d · 8be715d
1 parent 7cb35a1
commit 8be715d
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 49 deletions.
diff --git a/docs/SelectMulti.stories.ts b/docs/SelectMulti.stories.ts
@@ -23,7 +23,6 @@ const Template = (args, { argTypes }) => ({
 			:labelIsVisible="labelIsVisible"
 			:placeholder="placeholder"
 			:disabled="disabled"
-			:iconIsClickable="iconIsClickable"
 			:displayPillsBelowInput="displayPillsBelowInput"
 			:noResultsMessage="noResultsMessage"
 			:uniqueIdField="uniqueIdField"
@@ -38,7 +37,6 @@ Primary.args = {
 	labelField: 'label',
 	labelIsVisible: true,
 	loading: false,
-	iconIsClickable: true,
 	placeholder: 'Select Options',
 	disabled: false,
 	displayPillsBelowInput: false,

diff --git a/specs/SelectMulti.spec.ts b/specs/SelectMulti.spec.ts
@@ -78,41 +78,5 @@ describe('SelectMulti', () => {
 				expect(Object.keys(input.attributes())).toContain('aria-labelledby')
 			})
 		})
-
-		describe('iconIsClickable works', () => {
-			it('when iconIsClickable false its not clickable and wrapper is a div', () => {
-
-				wrapper = mount({
-					data() { 
-						return { selectedOptions: [], options }},
-					template: '<div><SelectMulti :options="options" v-model="selectedOptions" label="Sample SelectMulti" /></div>',
-					components: { SelectMulti }
-				})
-
-				const selectMulti = wrapper.findComponent(SelectMulti)
-
-				const inputIconBlock = selectMulti.find('.combo-input-icon-block')
-
-				expect(inputIconBlock.element.tagName === 'DIV').toBeTruthy()
-				expect(inputIconBlock.classes('not-clickable')).toBe(true)
-			})
-
-			it('when iconIsClickable true its clickable and wrapper is a button', () => {
-
-				wrapper = mount({
-					data() { 
-						return { selectedOptions: [], options }},
-					template: '<div><SelectMulti :options="options" v-model="selectedOptions" :iconIsClickable="true" label="Sample SelectMulti" /></div>',
-					components: { SelectMulti }
-				})
-
-				const selectMulti = wrapper.findComponent(SelectMulti)
-
-				const inputIconBlock = selectMulti.find('.combo-input-icon-block')
-
-				expect(inputIconBlock.element.tagName === 'BUTTON').toBeTruthy()
-				expect(inputIconBlock.classes('not-clickable')).toBe(false)
-			})
-		})
 	})
 })
diff --git a/src/SelectMulti.vue b/src/SelectMulti.vue
@@ -138,10 +138,6 @@
 				type: String,
 				required: false,
 				default: 'value'
-			},
-			iconIsClickable: {
-				type: Boolean,
-				default: false
 			}
 		},
 		data() {
@@ -429,7 +425,7 @@
 				</div>
 			</slot>
 			</div>
-			<component :is="iconIsClickable ? 'button' : 'div'" @click="iconIsClickable ? updateMenuState(iconIsClickable) : false" class="combo-input-icon-block" :class="{ 'not-clickable': !iconIsClickable }">
+			<div @click="updateMenuState(true)" class="combo-input-icon-block">
 				<template v-if="!loading">
 					<slot name="input-icon">
 						<svg class="combo-plus-icon" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
@@ -444,7 +440,7 @@
 						<path d="M10.6353 4.71384C11.3212 7.36481 9.80202 10.0897 7.24202 10.8L7.55253 12C10.7525 11.1121 12.6516 7.70601 11.7941 4.39231L10.6353 4.71384Z" fill="currentColor"/>
 					</svg>
 				</template>
-			</component>
+			</div>
 		</div>
 	</div>
 </template>
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
@@ -353,11 +353,7 @@ $spacer: 1.875rem; // 30px
 			top: 50%;
 			transform: translate(0, -50%);
 			right: math.div($spacer, 1.5);
-			border: none;
-
-			&.not-clickable {
-				pointer-events: none;
-			}
+			cursor: pointer;
 		}
 
 		.combo-plus-icon {