From 6ed36daef78ab534d422cb2a58c0b31c4adc99fa Mon Sep 17 00:00:00 2001
From: mabashian <mabashia@redhat.com>
Date: Wed, 30 Jan 2019 12:59:22 -0500
Subject: [PATCH] Fixes close button on tags in instance group form field

---
 __tests__/components/Lookup.test.jsx |  8 ++++----
 src/components/Lookup/Lookup.jsx     | 16 +++++-----------
 2 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/__tests__/components/Lookup.test.jsx b/__tests__/components/Lookup.test.jsx
index c7d08242f5..03555d868b 100644
--- a/__tests__/components/Lookup.test.jsx
+++ b/__tests__/components/Lookup.test.jsx
@@ -32,8 +32,8 @@ describe('<Lookup />', () => {
     searchItem.first().simulate('click');
     expect(spy).toHaveBeenCalled();
   });
-  test('calls "onChecked" when a user changes a checkbox', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'onChecked');
+  test('calls "toggleSelected" when a user changes a checkbox', () => {
+    const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
     const wrapper = mount(
       <I18nProvider>
         <Lookup
@@ -49,8 +49,8 @@ describe('<Lookup />', () => {
     wrapper.find('input[type="checkbox"]').simulate('change');
     expect(spy).toHaveBeenCalled();
   });
-  test('calls "onRemove" when remove icon is clicked', () => {
-    const spy = jest.spyOn(Lookup.prototype, 'onRemove');
+  test('calls "toggleSelected" when remove icon is clicked', () => {
+    const spy = jest.spyOn(Lookup.prototype, 'toggleSelected');
     mockData = [{ name: 'foo', id: 0, isChecked: false }, { name: 'bar', id: 1, isChecked: true }];
     const wrapper = mount(
       <I18nProvider>
diff --git a/src/components/Lookup/Lookup.jsx b/src/components/Lookup/Lookup.jsx
index 313f428fee..e1170702bf 100644
--- a/src/components/Lookup/Lookup.jsx
+++ b/src/components/Lookup/Lookup.jsx
@@ -23,25 +23,19 @@ class Lookup extends React.Component {
     };
     this.handleModalToggle = this.handleModalToggle.bind(this);
     this.onLookup = this.onLookup.bind(this);
-    this.onChecked = this.onChecked.bind(this);
     this.wrapTags = this.wrapTags.bind(this);
-    this.onRemove = this.onRemove.bind(this);
+    this.toggleSelected = this.toggleSelected.bind(this);
   }
 
   onLookup () {
     this.handleModalToggle();
   }
 
-  onChecked (row) {
+  toggleSelected (row) {
     const { lookupChange } = this.props;
     lookupChange(row);
   }
 
-  onRemove (evt) {
-    const { lookupChange } = this.props;
-    lookupChange(evt.target.id);
-  }
-
   handleModalToggle () {
     this.setState((prevState) => ({
       isModalOpen: !prevState.isModalOpen,
@@ -52,7 +46,7 @@ class Lookup extends React.Component {
     return tags.filter(tag => tag.isChecked).map((tag) => (
       <span className="awx-c-tag--pill" key={tag.id}>
         {tag.name}
-        <Button className="awx-c-icon--remove" id={tag.id} onClick={this.onRemove}>
+        <Button className="awx-c-icon--remove" id={tag.id} onClick={() => this.toggleSelected(tag)}>
           x
         </Button>
       </span>
@@ -81,7 +75,7 @@ class Lookup extends React.Component {
                 itemId={i.id}
                 name={i.name}
                 isSelected={i.isChecked}
-                onSelect={() => this.onChecked(i)}
+                onSelect={() => this.toggleSelected(i)}
               />
             ))}
           </ul>
@@ -92,7 +86,7 @@ class Lookup extends React.Component {
                   label={i18n._(t`Selected`)}
                   selected={selected}
                   showOverflowAfter={5}
-                  onRemove={this.onChecked}
+                  onRemove={this.toggleSelected}
                 />
               )}
             </I18n>