Skip to content

Commit

Permalink
fix(InputGroup): toggle if clicking dropdown input
Browse files Browse the repository at this point in the history
  • Loading branch information
Phoebe Gao authored and phwebi committed Oct 27, 2021
1 parent 3df07f6 commit 1adc147
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 7 deletions.
3 changes: 2 additions & 1 deletion src/Dropdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
37 changes: 31 additions & 6 deletions src/__tests__/InputGroup.spec.js
Original file line number Diff line number Diff line change
@@ -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', () => {
Expand Down Expand Up @@ -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();
});
});
});

0 comments on commit 1adc147

Please sign in to comment.