From 1adc147d600309705ad25116121b89ad65b6409d Mon Sep 17 00:00:00 2001
From: Phoebe Gao <phoebe.gao@appfolio.com>
Date: Mon, 8 Feb 2021 13:45:08 -0800
Subject: [PATCH] fix(InputGroup): toggle if clicking dropdown input

---
 src/Dropdown.js                  |  3 ++-
 src/__tests__/InputGroup.spec.js | 37 ++++++++++++++++++++++++++------
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/Dropdown.js b/src/Dropdown.js
index 4ff39dc37..ed5424eaa 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -139,8 +139,9 @@ class Dropdown extends React.Component {
     const container = this.getContainer();
     const menu = this.getMenu();
     const clickIsInContainer = container.contains(e.target) && container !== e.target;
+    const clickIsInInput = container.classList.contains('input-group') && container.classList.contains('dropdown') && e.target.tagName === 'INPUT';
     const clickIsInMenu = menu && menu.contains(e.target) && menu !== e.target;
-    if ((clickIsInContainer || clickIsInMenu) && (e.type !== 'keyup' || e.which === keyCodes.tab)) {
+    if (((clickIsInContainer && !clickIsInInput) || clickIsInMenu) && (e.type !== 'keyup' || e.which === keyCodes.tab)) {
       return;
     }
 
diff --git a/src/__tests__/InputGroup.spec.js b/src/__tests__/InputGroup.spec.js
index 78b26cba7..138c99403 100644
--- a/src/__tests__/InputGroup.spec.js
+++ b/src/__tests__/InputGroup.spec.js
@@ -1,6 +1,6 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { InputGroup } from '../';
+import React, { useState } from 'react';
+import { shallow, mount } from 'enzyme';
+import { InputGroup, DropdownMenu, DropdownToggle, DropdownItem, Input } from '../';
 import Dropdown from '../Dropdown';
 
 describe('InputGroup', () => {
@@ -41,9 +41,34 @@ describe('InputGroup', () => {
     expect(wrapper.type()).toBe('main');
   });
 
-  it('should render Dropdown when type is dropdown', () => {
-    const wrapper = shallow(<InputGroup type="dropdown" />);
+  describe('When type="dropdown"', () => {
+    it('should render Dropdown', () => {
+      const wrapper = shallow(<InputGroup type="dropdown" />);
+  
+      expect(wrapper.type()).toBe(Dropdown);
+    });
 
-    expect(wrapper.type()).toBe(Dropdown);
+    it('should call toggle when input is clicked', () => {
+      jest.spyOn(Dropdown.prototype, 'toggle');
+
+      const wrapper = mount(
+        <InputGroup type="dropdown" isOpen={true} toggle={() => {}}>
+          <Input />
+          <DropdownToggle>Toggle</DropdownToggle>
+          <DropdownMenu right>
+            <DropdownItem>Test</DropdownItem>
+            <DropdownItem id="divider" divider />
+          </DropdownMenu>
+        </InputGroup>
+      , { attachTo: document.body });
+
+      expect(Dropdown.prototype.toggle.mock.calls.length).toBe(0);
+
+      document.querySelector('input.form-control').click();
+
+      expect(Dropdown.prototype.toggle.mock.calls.length).toBe(1);
+
+      wrapper.detach();
+    });
   });
 });