feat: Ability to keep the dropdown open always (#241) ✨

Closes #239

Author: moonjy1993

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)
 - [Styling and Customization](#styling-and-customization)
@@ -341,6 +342,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

@@ -407,4 +407,154 @@ Generated by [AVA](https://ava.li).
           />
         </div>
       </div>
+    </div
+
+## 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 {}}
+            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>

__snapshots__/src/index.test.js.snap

@@ -28,6 +28,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,
@@ -53,7 +54,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,
     }
     this.clientId = props.id || clientIdGenerator.get(this)
@@ -97,7 +98,7 @@ class DropdownTreeSelect extends Component {
   handleClick = () => {
     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) {
@@ -116,7 +117,7 @@ class DropdownTreeSelect extends Component {
   }
 
   handleOutsideClick = e => {
-    if (!isOutsideClick(e, this.node)) {
+    if (this.props.showDropdownAlways || !isOutsideClick(e, this.node)) {
       return
     }
 

src/index.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

src/index.test.js

@@ -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
          */