feat: add selectAllMode

README.md

@@ -103,6 +103,7 @@ Picky.defaultProps = {
   tabIndex: 0,
   keepOpen: true,
   selectAllText: 'Select all',
+  selectAllMode: 'default',
 };
 Picky.propTypes = {
   id: PropTypes.string.isRequired,
@@ -137,7 +138,12 @@ Picky.propTypes = {
   defaultFocusFilter: PropTypes.bool,
   className: PropTypes.string,
   renderList: PropTypes.func,
+  filterPlaceholder: PropTypes.string,
+  disabled: PropTypes.bool,
   getFilterValue: PropTypes.func,
+  caseSensitiveFilter: PropTypes.bool,
+  buttonProps: PropTypes.object,
+  selectAllMode: PropTypes.oneOf(['default', 'filtered']),
 };
 ```
 
@@ -173,6 +179,7 @@ Picky.propTypes = {
 - `getFilterValue` - Will provide the input value of filter to the picky dropdown, so that if we have a larger list of options then we can only supply the matching options based on this value.
 - `caseSensitiveFilter` - If true options will be returned when they match case
 - `buttonProps` - Additional props to apply the the button component, useful for supplying class names.
+- `selectAllMode` - default: `default`. When the mode is `filtered` the Select All won't be hidden when filtering.
 
 ## Custom rendering
 

index.d.ts

@@ -4,6 +4,7 @@ declare module 'react-picky' {
 
   export type PickyTabIndex = string | number;
 
+  type SelectAllMode = 'default' | 'filtered';
   /**
    * Properties returned from render
    *
@@ -173,7 +174,7 @@ declare module 'react-picky' {
      * @type {string}
      * @memberof PickyProps
      */
-    id:string;
+    id: string;
     /**
      * Default placeholder text
      *
@@ -408,6 +409,11 @@ declare module 'react-picky' {
      * True if you want a disabled Picky
      */
     disabled?: boolean;
+
+    /**
+     * Allows for additional functionalty with select all and filtering, see the docs.
+     */
+    selectAllMode?: SelectAllMode;
   }
 
   export default class Picky extends React.PureComponent<PickyProps, any> {

src/Picky.js

@@ -356,7 +356,11 @@ class Picky extends React.PureComponent {
   get showSelectAll() {
     const { renderSelectAll, multiple, includeSelectAll } = this.props;
     return (
-      !renderSelectAll && includeSelectAll && multiple && !this.state.filtered
+      !renderSelectAll &&
+      includeSelectAll &&
+      multiple &&
+      ((this.props.selectAllMode === 'default' && !this.state.filtered) ||
+        this.props.selectAllMode === 'filtered')
     );
   }
   render() {
@@ -466,6 +470,7 @@ Picky.defaultProps = {
   tabIndex: 0,
   keepOpen: true,
   selectAllText: 'Select all',
+  selectAllMode: 'default',
 };
 Picky.propTypes = {
   id: PropTypes.string.isRequired,
@@ -505,6 +510,7 @@ Picky.propTypes = {
   getFilterValue: PropTypes.func,
   caseSensitiveFilter: PropTypes.bool,
   buttonProps: PropTypes.object,
+  selectAllMode: PropTypes.oneOf(['default', 'filtered']),
 };
 
 export default Picky;

tests/Picky.test.js

@@ -691,6 +691,28 @@ describe('Picky', () => {
 
       expect(wrapper.find(sel('selectall'))).toHaveLength(0);
     });
+
+    it('should show select all when a filter has been entered but selectAllMode is filtered', () => {
+      const wrapper = mount(
+        <Picky
+          {...corePickyProps}
+          value={[]}
+          includeSelectAll={true}
+          options={[1, 2, 3]}
+          open={true}
+          filterDebounce={0}
+          includeFilter={true}
+          multiple={true}
+          selectAllMode="filtered"
+        />
+      );
+      expect(wrapper.find(sel('selectall'))).toHaveLength(1);
+
+      const event = { target: { value: '1' } };
+      wrapper.find(sel('picky__filter__input')).simulate('change', event);
+
+      expect(wrapper.find(sel('selectall'))).toHaveLength(1);
+    });
   });
 
   describe('Callbacks', () => {