fix(InputGroup): toggle if clicking dropdown input

kybru91 · Oct 27, 2021 · 1adc147 · 1adc147
1 parent 3df07f6
commit 1adc147
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 7 deletions.
diff --git 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
@@ -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();
+    });
   });
 });