feat(Filter): Focus filter by default on open if defaultFocusFilter s…

…upplied

fix #38

README.md

@@ -81,9 +81,10 @@ import 'react-picky/dist/picky.css'; // Include CSS
 **Note** If you check the network tag in your dev tools, notice how all images aren't loaded, this is because it's a virtual list.
 
 ### With and without virtual list example
-[![Edit [No virtual list] Simple example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9462xq75wy) 
 
-An example of a large multiselect with no virtual list, note the performance difference. 
+[![Edit [No virtual list] Simple example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9462xq75wy)
+
+An example of a large multiselect with no virtual list, note the performance difference.
 
 ## Props
 
@@ -130,7 +131,8 @@ Picky.propTypes = {
   manySelectedPlaceholder: PropTypes.string,
   allSelectedPlaceholder: PropTypes.string,
   selectAllText: PropTypes.string,
-  renderSelectAll: PropTypes.func
+  renderSelectAll: PropTypes.func,
+  defaultFocusFilter: PropTypes.bool
 };
 ```
 
@@ -161,6 +163,7 @@ Picky.propTypes = {
 * `allSelectedPlaceholder` - Default "%s selected" where %s is the number of items selected. This gets used when all options are selected.
 * `selectAllText` - Default "Select all", use this to override "Select all" text from top of dropdown when included with `includeSelectAll`.
 * `renderSelectAll` - Used for rendering a custom select all
+* `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 
 ## Custom rendering
 

docs/README.md

@@ -81,9 +81,10 @@ import 'react-picky/dist/picky.css'; // Include CSS
 **Note** If you check the network tag in your dev tools, notice how all images aren't loaded, this is because it's a virtual list.
 
 ### With and without virtual list example
-[![Edit [No virtual list] Simple example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9462xq75wy) 
 
-An example of a large multiselect with no virtual list, note the performance difference. 
+[![Edit [No virtual list] Simple example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/9462xq75wy)
+
+An example of a large multiselect with no virtual list, note the performance difference.
 
 ## Props
 
@@ -130,7 +131,8 @@ Picky.propTypes = {
   manySelectedPlaceholder: PropTypes.string,
   allSelectedPlaceholder: PropTypes.string,
   selectAllText: PropTypes.string,
-  renderSelectAll: PropTypes.func
+  renderSelectAll: PropTypes.func,
+  defaultFocusFilter: PropTypes.bool
 };
 ```
 
@@ -161,6 +163,7 @@ Picky.propTypes = {
 * `allSelectedPlaceholder` - Default "%s selected" where %s is the number of items selected. This gets used when all options are selected.
 * `selectAllText` - Default "Select all", use this to override "Select all" text from top of dropdown when included with `includeSelectAll`.
 * `renderSelectAll` - Used for rendering a custom select all
+* `defaultFocusFilter` - If set to true, will focus the filter by default when opened.
 
 ## Custom rendering
 

src/Filter.js

@@ -6,6 +6,7 @@ class Filter extends Component {
       <div className="picky__filter">
         <input
           type="text"
+          ref={input => (this.filterInput = input)}
           className="picky__filter__input"
           data-test="picky__filter__input"
           placeholder="Filter..."

src/Picky.js

@@ -44,14 +44,20 @@ class Picky extends React.PureComponent {
     this.allSelected = this.allSelected.bind(this);
     this.handleOutsideClick = this.handleOutsideClick.bind(this);
     this.isItemSelected = this.isItemSelected.bind(this);
+    this.focusFilterInput = this.focusFilterInput.bind(this);
   }
   componentWillMount() {
     const allSelected = this.allSelected();
+
     this.setState({
       allSelected
     });
   }
 
+  componentDidMount() {
+    this.focusFilterInput(this.state.open);
+  }
+
   componentWillReceiveProps(nextProps) {
     if (
       this.props.options !== nextProps.options ||
@@ -333,6 +339,14 @@ class Picky extends React.PureComponent {
     }
     this.toggleDropDown();
   }
+
+  focusFilterInput(isOpen) {
+    if (isOpen && this.props.defaultFocusFilter) {
+      if (this.filter && this.filter.filterInput) {
+        this.filter.filterInput.focus();
+      }
+    }
+  }
   /**
    * Toggle state of dropdown
    *
@@ -355,6 +369,7 @@ class Picky extends React.PureComponent {
       () => {
         const isOpen = this.state.open;
         // Prop callbacks
+        this.focusFilterInput(isOpen);
         if (isOpen && this.props.onOpen) {
           this.props.onOpen();
         } else if (!isOpen && this.props.onClose) {
@@ -430,6 +445,7 @@ class Picky extends React.PureComponent {
           >
             {includeFilter && (
               <Filter
+                ref={filter => (this.filter = filter)}
                 onFilterChange={
                   filterDebounce > 0
                     ? debounce(this.onFilterChange, filterDebounce)
@@ -525,7 +541,8 @@ Picky.propTypes = {
   manySelectedPlaceholder: PropTypes.string,
   allSelectedPlaceholder: PropTypes.string,
   selectAllText: PropTypes.string,
-  renderSelectAll: PropTypes.func
+  renderSelectAll: PropTypes.func,
+  defaultFocusFilter: PropTypes.bool
 };
 
 export default Picky;

tests/Picky.test.js

@@ -431,6 +431,21 @@ describe('Picky', () => {
       expect(wrapper.find(Filter)).toHaveLength(1);
     });
 
+    it('should be focused by default if defaultFocusFilter is true', () => {
+      //picky__filter__input
+      const wrapper = mount(
+        <Picky
+          includeFilter={true}
+          value={[]}
+          defaultFocusFilter={true}
+          open={true}
+        />
+      );
+      const input = wrapper.find(sel('picky__filter__input'));
+
+      expect(input.instance()).toEqual(document.activeElement);
+    });
+
     it('should call onFilterChange prop when text has changed', () => {
       const onChange = jest.fn();
       const wrapper = mount(<Filter onFilterChange={onChange} />);