feat: Add new props for search and keyboard navigation

The new prop searchTerm can be used to set the initial search term or fully control the search semantics for a higher-order component. The new prop onSearchChange allows specification of a callback for when the search term changes or the search mode is activated or deactivated. The new prop disableKeyboardNavigation allows disabling all actions associated with a key down event in the search input box.

Author: gandhis1

README.md

@@ -41,12 +41,14 @@ A lightweight and fast control to render a select component that can display hie
 - [Usage](#usage)
 - [Props](#props)
   - [className](#classname)
+  - [searchTerm](#searchterm)
   - [clearSearchOnChange](#clearsearchonchange)
   - [onChange](#onchange)
   - [onNodeToggle](#onnodetoggle)
   - [onAction](#onaction)
   - [onFocus](#onfocus)
   - [onBlur](#onblur)
+  - [onSearchChange](#onsearchchange)
   - [data](#data)
   - [texts](#texts)
   - [keepTreeOnSearch](#keeptreeonsearch)
@@ -66,7 +68,8 @@ A lightweight and fast control to render a select component that can display hie
   - [searchPredicate](#searchpredicate)
   - [inlineSearchInput](#inlinesearchinput)
   - [tabIndex](#tabIndex)
-  - [disablePoppingOnBackspace](#disablePoppingOnBackspace)
+  - [disablePoppingOnBackspace](#disablepoppingonbackspace)
+  - [disableKeyboardNavigation](#disablekeyboardnavigation)
 - [Styling and Customization](#styling-and-customization)
   - [Using default styles](#default-styles)
   - [Customizing with Bootstrap, Material Design styles](#customizing-styles)
@@ -188,6 +191,12 @@ Type: `string`
 
 Additional classname for container. The container renders with a default classname of `react-dropdown-tree-select`.
 
+### searchTerm
+
+Type: `string`
+
+Initializes or adjusts the active search term. Set to an empty string or `undefined` to turn search mode off.
+
 ### clearSearchOnChange
 
 Type: `bool`
@@ -256,6 +265,24 @@ Type: `function`
 
 Fires when input box loses focus or the dropdown arrow is clicked again (and the dropdown collapses). This is helpful for setting `dirty` or `touched` flags with forms.
 
+### onSearchChange
+
+Type: `function`
+
+Called when the search input box is changed with the current search term. This can be fired either through user input or automatically due to `clearSearchOnChange`. Example:
+
+```jsx
+function onSearchChange(searchTerm: str) {
+  if (searchTerm) {
+    console.log('New search term is', searchTerm)
+  } else {
+    console.log('Search mode has been disabled')
+  }
+}
+
+return <DropdownTreeSelect data={data} onSearchChange={onSearchChange} />
+```
+
 ### data
 
 Type: `Object` or `Array`
@@ -428,6 +455,12 @@ Type: `bool` (default: `false`)
 
 `disablePoppingOnBackspace=true` attribute indicates that when a user triggers a 'backspace' keyDown in the empty search bar, the tree will not deselect nodes.
 
+### disableKeyboardNavigation
+
+Type: `bool` (default: `false`)
+
+`disableKeyboardNavigation=true` prevents keyboard navigation actions from being taken on the nodes when the user triggers a keyDown in the search bar. This restores standard input box semantics.
+
 ## Styling and Customization
 
 ### Default styles

docs/src/stories/Options/index.js

@@ -11,6 +11,7 @@ class WithOptions extends PureComponent {
     super(props)
 
     this.state = {
+      searchTerm: '',
       clearSearchOnChange: false,
       keepTreeOnSearch: false,
       keepOpenOnSelect: false,
@@ -39,8 +40,13 @@ class WithOptions extends PureComponent {
     this.setState({ [value]: !this.state[value] })
   }
 
+  onSearchChange = searchTerm => {
+    this.setState({ searchTerm: searchTerm })
+  }
+
   render() {
     const {
+      searchTerm,
       clearSearchOnChange,
       keepTreeOnSearch,
       keepOpenOnSelect,
@@ -105,6 +111,15 @@ class WithOptions extends PureComponent {
               onChange={e => this.setState({ inlineSearchPlaceholder: e.target.value })}
             />
           </div>
+          <div style={{ marginBottom: '10px' }}>
+            <label htmlFor="searchTerm">Search term: </label>
+            <input
+              id="searchTerm"
+              type="text"
+              value={searchTerm}
+              onChange={e => this.setState({ searchTerm: e.target.value })}
+            />
+          </div>
           <Checkbox
             label="Inline Search Input"
             value="inlineSearchInput"
@@ -142,9 +157,11 @@ class WithOptions extends PureComponent {
           <DropdownTreeSelect
             id="rdts"
             data={data}
+            searchTerm={searchTerm}
             onChange={this.onChange}
             onAction={this.onAction}
             onNodeToggle={this.onNodeToggle}
+            onSearchChange={this.onSearchChange}
             clearSearchOnChange={clearSearchOnChange}
             keepTreeOnSearch={keepTreeOnSearch}
             keepOpenOnSelect={keepOpenOnSelect}

docs/src/stories/Simple/index.js

@@ -23,6 +23,10 @@ const onBlur = () => {
   console.log('onBlur')
 }
 
+const onSearchChange = searchTerm => {
+  console.log('onSearchChange::', searchTerm)
+}
+
 const Simple = () => (
   <div>
     <h1>Basic component</h1>
@@ -45,6 +49,7 @@ const Simple = () => (
       onNodeToggle={onNodeToggle}
       onFocus={onFocus}
       onBlur={onBlur}
+      onSearchChange={onSearchChange}
       className="demo"
     />
   </div>

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-dropdown-tree-select",
-  "version": "0.0.0-semantic-release",
+  "name": "@gandhis1/react-dropdown-tree-select",
+  "version": "2.7.1-fork-2",
   "description": "Lightweight, customizable and fast Dropdown Tree Select component for React",
   "keywords": [
     "react",

src/index.js

@@ -23,6 +23,7 @@ import { getAriaLabel } from './a11y'
 class DropdownTreeSelect extends Component {
   static propTypes = {
     data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
+    searchTerm: PropTypes.string,
     clearSearchOnChange: PropTypes.bool,
     keepTreeOnSearch: PropTypes.bool,
     keepChildrenOnSearch: PropTypes.bool,
@@ -41,6 +42,7 @@ class DropdownTreeSelect extends Component {
     onNodeToggle: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    onSearchChange: PropTypes.func,
     mode: PropTypes.oneOf(['multiSelect', 'simpleSelect', 'radioSelect', 'hierarchical']),
     showPartiallySelected: PropTypes.bool,
     disabled: PropTypes.bool,
@@ -50,18 +52,21 @@ class DropdownTreeSelect extends Component {
     inlineSearchInput: PropTypes.bool,
     tabIndex: PropTypes.number,
     disablePoppingOnBackspace: PropTypes.bool,
+    disableKeyboardNavigation: PropTypes.bool,
   }
 
   static defaultProps = {
     onAction: () => {},
     onFocus: () => {},
     onBlur: () => {},
     onChange: () => {},
+    onSearchChange: _ => {},
     texts: {},
     showDropdown: 'default',
     inlineSearchInput: false,
     tabIndex: 0,
     disablePoppingOnBackspace: false,
+    disableKeyboardNavigation: true,
   }
 
   constructor(props) {
@@ -73,7 +78,7 @@ class DropdownTreeSelect extends Component {
     this.clientId = props.id || clientIdGenerator.get(this)
   }
 
-  initNewProps = ({ data, mode, showDropdown, showPartiallySelected, searchPredicate }) => {
+  initNewProps = ({ data, searchTerm, mode, showDropdown, showPartiallySelected, searchPredicate }) => {
     this.treeManager = new TreeManager({
       data,
       mode,
@@ -86,7 +91,12 @@ class DropdownTreeSelect extends Component {
       if (currentFocusNode) {
         currentFocusNode._focused = true
       }
+      const searchTermChanged = searchTerm !== prevState.searchTerm
+      if (this.searchInput && searchTermChanged) {
+        this.searchInput.value = searchTerm
+      }
       return {
+        searchModeOn: searchTermChanged,
         showDropdown: /initial|always/.test(showDropdown) || prevState.showDropdown === true,
         ...this.treeManager.getTreeAndTags(),
       }
@@ -96,7 +106,10 @@ class DropdownTreeSelect extends Component {
   resetSearchState = () => {
     // clear the search criteria and avoid react controlled/uncontrolled warning
     if (this.searchInput) {
-      this.searchInput.value = ''
+      if (this.searchInput.value !== '') {
+        this.props.onSearchChange(this.searchInput.value)
+        this.searchInput.value = ''
+      }
     }
 
     return {
@@ -154,6 +167,7 @@ class DropdownTreeSelect extends Component {
       this.props.keepChildrenOnSearch
     )
     const searchModeOn = value.length > 0
+    this.props.onSearchChange(value)
 
     this.setState({
       tree,
@@ -238,6 +252,10 @@ class DropdownTreeSelect extends Component {
   }
 
   onKeyboardKeyDown = e => {
+    if (this.props.disableKeyboardNavigation) {
+      return // Will fire the default action
+    }
+
     const { readOnly, mode, disablePoppingOnBackspace } = this.props
     const { showDropdown, tags, searchModeOn, currentFocus } = this.state
     const tm = this.treeManager

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

@@ -1,5 +1,5 @@
 // tslint:disable:interface-name
-declare module 'react-dropdown-tree-select' {
+declare module '@gandhis1/react-dropdown-tree-select' {
   import * as React from 'react'
 
   export type TreeData = Object | TreeNodeProps[]
@@ -10,6 +10,8 @@ declare module 'react-dropdown-tree-select' {
 
   export interface DropdownTreeSelectProps {
     data: TreeData
+    /** Initialize the search input with the specified term and search the nodes */
+    searchTerm?: str
     /** Clear the input search if a node has been selected/unselected */
     clearSearchOnChange?: boolean
     /** Displays search results as a tree instead of flattened results */
@@ -54,6 +56,9 @@ declare module 'react-dropdown-tree-select' {
      * This is helpful for setting dirty or touched flags with forms
      */
     onBlur?: () => void
+    /** Fires when search input is modified.
+     */
+    onSearchChange?: (searchTerm: str) => void
     /** Defines how the dropdown is rendered / behaves
          *
          * - multiSelect
@@ -103,6 +108,8 @@ declare module 'react-dropdown-tree-select' {
      * search bar, the tree will not deselect nodes.
      */
     disablePoppingOnBackspace?: boolean
+    /** dsiableKeyboardNavigation will disable keyboard navigation of the tree */
+    dsiableKeyboardNavigation?: boolean
   }
 
   export interface DropdownTreeSelectState {