diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index de932be86..020607bf0 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -1,6 +1,6 @@
 import { When, Then } from "cypress-cucumber-preprocessor/steps";
 When("I search for {string}", value => {
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type(value);
 });
@@ -16,7 +16,7 @@ Then("the search has no results", () => {
     expect($li).to.have.length(1);
   });
   cy.get(".ds-select-dropdown").should("contain", 'Nothing found');
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type("{esc}");
 });
@@ -35,21 +35,21 @@ Then("I should see the following users in the select dropdown:", table => {
 });
 
 When("I type {string} and press Enter", value => {
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type(value)
     .type("{enter}", { force: true });
 });
 
 When("I type {string} and press escape", value => {
-  cy.get("[data-test='search-field']")
+  cy.get(".searchable-input .ds-select-search")
     .focus()
     .type(value)
     .type("{esc}");
 });
 
 Then("the search field should clear", () => {
-  cy.get("[data-test='search-field']").should("have.text", "");
+  cy.get(".searchable-input .ds-select-search").should("have.text", "");
 });
 
 When("I select a post entry", () => {
diff --git a/webapp/components/features/SearchField/SearchField.spec.js b/webapp/components/features/SearchField/SearchField.spec.js
index 70ba2cedd..05daf7a9c 100644
--- a/webapp/components/features/SearchField/SearchField.spec.js
+++ b/webapp/components/features/SearchField/SearchField.spec.js
@@ -2,7 +2,7 @@ import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import SearchField from './SearchField.vue'
 import SearchableInput from '~/components/generic/SearchableInput/SearchableInput'
-import { results as searchResults } from './SearchField.story'
+import { searchResults } from '~/components/generic/SearchableInput/SearchableInput.story'
 const localVue = global.localVue
 
 localVue.filter('truncate', () => 'truncated string')
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.spec.js b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
index d5320932c..db314630f 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.spec.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.spec.js
@@ -2,7 +2,7 @@ import { config, mount } from '@vue/test-utils'
 import Vuex from 'vuex'
 import Vue from 'vue'
 import SearchableInput from './SearchableInput'
-import { results } from '~/components/features/SearchField/SearchField.story'
+import { searchResults } from '~/components/generic/SearchableInput/SearchableInput.story'
 
 const localVue = global.localVue
 
@@ -77,7 +77,7 @@ describe('SearchableInput.vue', () => {
 
       describe('navigating to resource', () => {
         beforeEach(() => {
-          propsData = { options: results }
+          propsData = { options: searchResults }
           wrapper = Wrapper()
           select = wrapper.find('.ds-select')
           select.trigger('focus')
diff --git a/webapp/components/features/SearchField/SearchField.story.js b/webapp/components/generic/SearchableInput/SearchableInput.story.js
similarity index 93%
rename from webapp/components/features/SearchField/SearchField.story.js
rename to webapp/components/generic/SearchableInput/SearchableInput.story.js
index 5ff41cb27..68feaadba 100644
--- a/webapp/components/features/SearchField/SearchField.story.js
+++ b/webapp/components/generic/SearchableInput/SearchableInput.story.js
@@ -1,11 +1,11 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import SearchField from './SearchField.vue'
+import SearchableInput from './SearchableInput.vue'
 import helpers from '~/storybook/helpers'
 
 helpers.init()
 
-export const results = [
+export const searchResults = [
   {
     id: 'post-by-jenny',
     __typename: 'Post',
@@ -104,14 +104,12 @@ storiesOf('Search Field', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
   .add('test', () => ({
-    components: { SearchField },
+    components: { SearchableInput },
     store: helpers.store,
     data: () => ({
-      results: results,
+      searchResults,
     }),
     template: `
-      <search-field
-        :searchResults="results"
-      />
+      <searchable-input :options="searchResults" />
     `,
   }))
diff --git a/webapp/components/generic/SearchableInput/SearchableInput.vue b/webapp/components/generic/SearchableInput/SearchableInput.vue
index 5a5c38525..cc9269ecf 100644
--- a/webapp/components/generic/SearchableInput/SearchableInput.vue
+++ b/webapp/components/generic/SearchableInput/SearchableInput.vue
@@ -185,7 +185,6 @@ export default {
     display: flex;
     flex-wrap: wrap;
   }
-  &,
   .ds-select-dropdown {
     transition: box-shadow 100ms;
     max-height: 70vh;