Merge remote-tracking branch 'upstream/develop' into feat/dowjones#216

# Conflicts:
#	__snapshots__/src/index.test.js.snap

README.md

@@ -54,6 +54,7 @@ A lightweight and fast control to render a select component that can display hie
   - [radioSelect](#radioSelect)
   - [showPartiallySelected](#showpartiallyselected)
   - [showDropdown](#showDropdown)
+  - [showDropdownAlways](#showDropdownAlways)
   - [form states (disabled|readOnly)](#formstates)
   - [id](#id)
   - [label](#label)
@@ -344,6 +345,12 @@ Type: `bool` (default: `false`)
 
 If set to true, shows the dropdown when rendered. This can be used to render the component with the dropdown open as its initial state.
 
+### showDropdownAlways
+
+Type: `bool`
+
+If set to true, always shows the dropdown when rendered, and toggling dropdown will be disabled.
+
 ### form states (disabled|readOnly)
 
 Type: `bool` (default: `false`)

__snapshots__/src/index.test.js.md

@@ -4,6 +4,157 @@ The actual snapshot is saved in `index.test.js.snap`.
 
 Generated by [AVA](https://ava.li).
 
+## always shows dropdown
+
+> Snapshot 1
+
+    <div
+      className="react-dropdown-tree-select"
+      id="rdts"
+    >
+      <div
+        className="dropdown"
+      >
+        <a
+          className="dropdown-trigger arrow top"
+          onClick={Function {}}
+        >
+          <Input
+            inputRef={Function inputRef {}}
+            onBlur={Function {}}
+            onFocus={Function {}}
+            onInputChange={Function {}}
+            onKeyDown={Function {}}
+            onTagRemove={Function {}}
+            tags={[]}
+          />
+        </a>
+        <div
+          className="dropdown-content"
+        >
+          <Tree
+            clientId="rdts"
+            data={
+              Map {
+                'rdts-0' => {
+                  _children: [
+                    'rdts-0-0',
+                    'rdts-0-1',
+                  ],
+                  _depth: 0,
+                  _id: 'rdts-0',
+                  children: undefined,
+                  label: 'item1',
+                  value: 'value1',
+                },
+                'rdts-0-0' => {
+                  _children: [
+                    'rdts-0-0-0',
+                    'rdts-0-0-1',
+                  ],
+                  _depth: 1,
+                  _id: 'rdts-0-0',
+                  _parent: 'rdts-0',
+                  children: undefined,
+                  label: 'item1-1',
+                  value: 'value1-1',
+                },
+                'rdts-0-0-0' => {
+                  _depth: 2,
+                  _id: 'rdts-0-0-0',
+                  _parent: 'rdts-0-0',
+                  label: 'item1-1-1',
+                  value: 'value1-1-1',
+                },
+                'rdts-0-0-1' => {
+                  _depth: 2,
+                  _id: 'rdts-0-0-1',
+                  _parent: 'rdts-0-0',
+                  label: 'item1-1-2',
+                  value: 'value1-1-2',
+                },
+                'rdts-0-1' => {
+                  _depth: 1,
+                  _id: 'rdts-0-1',
+                  _parent: 'rdts-0',
+                  label: 'item1-2',
+                  value: 'value1-2',
+                },
+                'rdts-1' => {
+                  _children: [
+                    'rdts-1-0',
+                    'rdts-1-1',
+                  ],
+                  _depth: 0,
+                  _id: 'rdts-1',
+                  children: undefined,
+                  label: 'item2',
+                  value: 'value2',
+                },
+                'rdts-1-0' => {
+                  _children: [
+                    'rdts-1-0-0',
+                    'rdts-1-0-1',
+                    'rdts-1-0-2',
+                  ],
+                  _depth: 1,
+                  _id: 'rdts-1-0',
+                  _parent: 'rdts-1',
+                  children: undefined,
+                  label: 'item2-1',
+                  value: 'value2-1',
+                },
+                'rdts-1-0-0' => {
+                  _depth: 2,
+                  _id: 'rdts-1-0-0',
+                  _parent: 'rdts-1-0',
+                  label: 'item2-1-1',
+                  value: 'value2-1-1',
+                },
+                'rdts-1-0-1' => {
+                  _depth: 2,
+                  _id: 'rdts-1-0-1',
+                  _parent: 'rdts-1-0',
+                  label: 'item2-1-2',
+                  value: 'value2-1-2',
+                },
+                'rdts-1-0-2' => {
+                  _children: [
+                    'rdts-1-0-2-0',
+                  ],
+                  _depth: 2,
+                  _id: 'rdts-1-0-2',
+                  _parent: 'rdts-1-0',
+                  children: undefined,
+                  label: 'item2-1-3',
+                  value: 'value2-1-3',
+                },
+                'rdts-1-0-2-0' => {
+                  _depth: 3,
+                  _id: 'rdts-1-0-2-0',
+                  _parent: 'rdts-1-0-2',
+                  label: 'item2-1-3-1',
+                  value: 'value2-1-3-1',
+                },
+                'rdts-1-1' => {
+                  _depth: 1,
+                  _id: 'rdts-1-1',
+                  _parent: 'rdts-1',
+                  label: 'item2-2',
+                  value: 'value2-2',
+                },
+              }
+            }
+            onAction={Function {}}
+            onCheckboxChange={Function {}}
+            onNodeToggle={Function {}}
+            pageSize={100}
+            searchModeOn={false}
+          />
+        </div>
+      </div>
+    </div>
+
 ## doesn't toggle dropdown if it's disabled
 
 > Snapshot 1

src/index.js

@@ -30,6 +30,7 @@ class DropdownTreeSelect extends Component {
     keepOpenOnSelect: PropTypes.bool,
     placeholderText: PropTypes.string,
     showDropdown: PropTypes.bool,
+    showDropdownAlways: PropTypes.bool,
     className: PropTypes.string,
     onChange: PropTypes.func,
     onAction: PropTypes.func,
@@ -57,7 +58,7 @@ class DropdownTreeSelect extends Component {
   constructor(props) {
     super(props)
     this.state = {
-      showDropdown: this.props.showDropdown || false,
+      showDropdown: this.props.showDropdown || this.props.showDropdownAlways || false,
       searchModeOn: false,
       currentFocus: undefined,
     }
@@ -107,7 +108,7 @@ class DropdownTreeSelect extends Component {
   handleClick = (e, callback) => {
     this.setState(prevState => {
       // keep dropdown active when typing in search box
-      const showDropdown = this.keepDropdownActive || !prevState.showDropdown
+      const showDropdown = this.props.showDropdownAlways || this.keepDropdownActive || !prevState.showDropdown
 
       // register event listeners only if there is a state change
       if (showDropdown !== prevState.showDropdown) {
@@ -126,7 +127,7 @@ class DropdownTreeSelect extends Component {
   }
 
   handleOutsideClick = e => {
-    if (!isOutsideClick(e, this.node)) {
+    if (this.props.showDropdownAlways || !isOutsideClick(e, this.node)) {
       return
     }
 

src/index.test.js

@@ -72,6 +72,19 @@ test('shows dropdown', t => {
   t.snapshot(toJson(wrapper))
 })
 
+test('always shows dropdown', t => {
+  const { tree } = t.context
+  const wrapper = shallow(<DropdownTreeSelect id={dropdownId} data={tree} showDropdownAlways />)
+  t.snapshot(toJson(wrapper))
+})
+
+test('keeps dropdown open for showDropdownAlways', t => {
+  const { tree } = t.context
+  const wrapper = mount(<DropdownTreeSelect id={dropdownId} data={tree} showDropdownAlways />)
+  wrapper.instance().handleClick()
+  t.true(wrapper.state().showDropdown)
+})
+
 test('notifies on action', t => {
   const handler = spy()
   const { tree } = t.context

types/react-dropdown-tree-select.d.ts

@@ -25,6 +25,9 @@ declare module "react-dropdown-tree-select" {
          * This can be used to render the component with the dropdown open as its initial state
          */
         showDropdown?: boolean;
+        /** If set to true, always shows the dropdown when rendered, and toggling dropdown will be disabled.
+         */
+        showDropdownAlways?: boolean;
         /** Additional classname for container.
          * The container renders with a default classname of react-dropdown-tree-select
          */