Open FilterPickWrapper when clicking on a filter with correct input autofocus

packages/strapi-helper-plugin/lib/src/components/InputDate/index.js

@@ -60,7 +60,7 @@ function InputDate(props) {
 }
 
 InputDate.defaultProps = {
-  autoFocus: true,
+  autoFocus: false,
   className: '',
   deactivateErrorHighlight: false,
   disabled: false,

packages/strapi-plugin-content-manager/admin/src/components/Filter/Flex.js

@@ -6,11 +6,8 @@
 import styled from 'styled-components';
 
 const Flex = styled.div`
-  ${'' /* display: flex; */}
   height: 30px;
   display: inline-block;
-  ${'' /* max-width: 250px; */}
-  ${'' /* min-width: 200px; */}
   margin-bottom: 6px;
   margin-right: 10px;
   padding: 0 10px;
@@ -20,12 +17,12 @@ const Flex = styled.div`
   line-height: 30px;
   color: #007EFF;
   font-size: 13px;
-  > div:first-child {
-    flex: 2;
-  }
   > span:nth-child(2) {
     font-weight: 700;
   }
+  > span:nth-child(3) {
+    cursor: pointer;
+  }
   -webkit-font-smoothing-antialiased;
 `;
 

packages/strapi-plugin-content-manager/admin/src/components/Filter/index.js

@@ -14,7 +14,7 @@ import Remove from './Remove';
 import Separator from './Separator';
 
 
-function Filter({ filter, index, onClick, schema }) {
+function Filter({ filter, index, onClick, onClickOpen, schema }) {
   let value = filter.value;
 
   if (schema[filter.attr].type === 'date') {
@@ -29,7 +29,13 @@ function Filter({ filter, index, onClick, schema }) {
   }
 
   return (
-    <Flex>
+    <Flex
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClickOpen(index);
+      }}
+    >
       <span>{upperFirst(filter.attr)}&nbsp;</span>
       <FormattedMessage id={`content-manager.components.FilterOptions.FILTER_TYPES.${filter.filter}`} />
       <span>&nbsp;{toString(value)}</span>
@@ -43,6 +49,10 @@ Filter.defaultProps = {
   filter: {},
   index: 0,
   onClick: () => {},
+  onClickOpen: (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  },
   schema: {},
 };
 
@@ -50,6 +60,7 @@ Filter.propTypes = {
   filter: PropTypes.object,
   index: PropTypes.number,
   onClick: PropTypes.func,
+  onClickOpen: PropTypes.func,
   schema: PropTypes.object,
 };
 

packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/InputWithAutoFocus.js

@@ -31,6 +31,21 @@ const getInputType = (attrType) => {
 
 
 class InputWithAutofocus extends React.Component {
+  componentDidMount() {
+    if (this.props.filterToFocus === this.props.index) {
+      return new Promise(resolve => {
+        setTimeout(() => {
+          if (this.inputEl.hasOwnProperty('openCalendar')) {
+            this.inputEl.openCalendar();
+          } else {
+            this.inputEl.focus();
+          }
+          resolve();
+        }, 300);
+      });
+    }
+  }
+
   render() {
     const { filter, inputStyle, name, onChange, schema } = this.props;
     const Input = getInputType(get(schema, [filter.attr, 'type'], 'string'));
@@ -50,6 +65,11 @@ class InputWithAutofocus extends React.Component {
 
 InputWithAutofocus.propTypes = {
   filter: PropTypes.object.isRequired,
+  filterToFocus: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.number,
+  ]).isRequired,
+  index: PropTypes.number.isRequired,
   inputStyle: PropTypes.object.isRequired,
   name: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,

packages/strapi-plugin-content-manager/admin/src/components/FilterOptions/index.js

@@ -21,7 +21,7 @@ import FILTER_TYPES from './filterTypes';
 const defaultInputStyle = { width: '210px', marginRight: '10px', paddingTop: '4px' };
 const midSelectStyle = { minWidth: '130px', maxWidth: '200px', marginLeft: '10px', marginRight: '10px' };
 
-function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, schema, showAddButton }) {
+function FilterOptions({ filter, filterToFocus, index, onChange, onClickAdd, onClickRemove, schema, show, showAddButton }) {
   const selectStyle = { minWidth: '170px', maxWidth: '200px' };
   const attrType = get(schema, [filter.attr, 'type'], 'string');
   const inputStyle = attrType === 'boolean' ?
@@ -49,8 +49,11 @@ function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, sch
         style={midSelectStyle}
       />
       <Wrapper>
+        {show && (
           <InputWithAutofocus
             filter={filter}
+            filterToFocus={filterToFocus}
+            index={index}
             inputStyle={inputStyle}
             name={`${index}.value`}
             onChange={onChange}
@@ -58,6 +61,7 @@ function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, sch
             style={inputStyle}
             value={get(filter, 'value')}
           />
+        )}
       </Wrapper>
       {showAddButton && (
         <Add
@@ -72,21 +76,28 @@ function FilterOptions({ filter, index, onChange, onClickAdd, onClickRemove, sch
 
 FilterOptions.defaultProps = {
   filter: {},
+  filterToFocus: null,
   index: 0,
   onChange: () => {},
   onClickAdd: () => {},
   onClickRemove: () => {},
   schema: {},
+  show: false,
   showAddButton: false,
 };
 
 FilterOptions.propTypes = {
   filter: PropTypes.object,
+  filterToFocus: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.number,
+  ]),
   index: PropTypes.number,
   onChange: PropTypes.func,
   onClickAdd: PropTypes.func,
   onClickRemove: PropTypes.func,
   schema: PropTypes.object,
+  show: PropTypes.bool,
   showAddButton: PropTypes.bool,
 };
 

packages/strapi-plugin-content-manager/admin/src/components/FiltersPickWrapper/index.js

@@ -112,7 +112,7 @@ class FiltersPickWrapper extends React.PureComponent {
   );
 
   render() {
-    const { appliedFilters, schema, show } = this.props;
+    const { appliedFilters, filterToFocus, schema, show } = this.props;
 
     return (
       <form onSubmit={this.handleSubmit}>
@@ -131,11 +131,13 @@ class FiltersPickWrapper extends React.PureComponent {
                   <FilterOptions
                     key={key}
                     filter={filter}
+                    filterToFocus={filterToFocus}
                     index={key}
                     onChange={this.handleChange}
                     onClickAdd={this.handleClickAdd}
                     onClickRemove={this.handleClickRemove}
                     schema={schema}
+                    show={show}
                     showAddButton={this.shouldDisplayAddButton(key)}
                   />
                 ))}
@@ -156,6 +158,7 @@ class FiltersPickWrapper extends React.PureComponent {
 
 FiltersPickWrapper.defaultProps = {
   appliedFilters: [],
+  filterToFocus: null,
   modelName: '',
   schema: {},
 };
@@ -164,6 +167,10 @@ FiltersPickWrapper.propTypes = {
   addFilter: PropTypes.func.isRequired,
   appliedFilters: PropTypes.array,
   close: PropTypes.func.isRequired,
+  filterToFocus: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.number,
+  ]),
   modelName: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   onSubmit: PropTypes.func.isRequired,

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/actions.js

@@ -14,6 +14,7 @@ import {
   ON_CHANGE,
   ON_CLICK_REMOVE,
   ON_TOGGLE_FILTERS,
+  OPEN_FILTERS_WITH_SELECTION,
   REMOVE_ALL_FILTERS,
   REMOVE_FILTER,
   SET_PARAMS,
@@ -82,6 +83,13 @@ export function onClickRemove(index) {
   };
 }
 
+export function openFiltersWithSelections(index) {
+  return {
+    type: OPEN_FILTERS_WITH_SELECTION,
+    index,
+  };
+}
+
 export function onToggleFilters() {
   return {
     type: ON_TOGGLE_FILTERS,

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/constants.js

@@ -14,6 +14,7 @@ export const GET_DATA_SUCCEEDED = 'ContentManager/ListPage/GET_DATA_SUCCEEDED';
 export const ON_CHANGE = 'ContentManager/ListPage/ON_CHANGE';
 export const ON_CLICK_REMOVE = 'ContentManager/ListPage/ON_CLICK_REMOVE';
 export const ON_TOGGLE_FILTERS = 'ContentManager/ListPage/ON_TOGGLE_FILTERS';
+export const OPEN_FILTERS_WITH_SELECTION = 'ContentManager/ListPage/OPEN_FILTERS_WITH_SELECTION';
 export const REMOVE_ALL_FILTERS = 'ContentManager/ListPage/REMOVE_ALL_FILTERS';
 export const REMOVE_FILTER = 'ContentManager/ListPage/REMOVE_FILTER';
 export const SET_PARAMS = 'ContentManager/ListPage/SET_PARAMS';

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/index.js

@@ -43,6 +43,7 @@ import {
   onChange,
   onClickRemove,
   onToggleFilters,
+  openFiltersWithSelections,
   removeAllFilters,
   removeFilter,
   setParams,
@@ -296,10 +297,11 @@ export class ListPage extends React.Component {
     const {
       addFilter,
       listPage,
-      listPage: { appliedFilters, filters, params, showFilter },
+      listPage: { appliedFilters, filters, filterToFocus, params, showFilter },
       onChange,
       onClickRemove,
       onToggleFilters,
+      openFiltersWithSelections,
       removeAllFilters,
       removeFilter,
     } = this.props;
@@ -324,6 +326,7 @@ export class ListPage extends React.Component {
           addFilter={addFilter}
           appliedFilters={appliedFilters}
           close={onToggleFilters}
+          filterToFocus={filterToFocus}
           modelName={this.getCurrentModelName()}
           onChange={onChange}
           onSubmit={this.handleSubmit}
@@ -364,6 +367,7 @@ export class ListPage extends React.Component {
                       filter={filter}
                       index={key}
                       onClick={onClickRemove}
+                      onClickOpen={openFiltersWithSelections}
                       schema={this.getCurrentSchema()}
                     />
                   ))}
@@ -425,6 +429,7 @@ ListPage.propTypes = {
   onChange: PropTypes.func.isRequired,
   onClickRemove: PropTypes.func.isRequired,
   onToggleFilters: PropTypes.func.isRequired,
+  openFiltersWithSelections: PropTypes.func.isRequired,
   removeAllFilters: PropTypes.func.isRequired,
   removeFilter: PropTypes.func.isRequired,
   schema: PropTypes.object.isRequired,
@@ -442,6 +447,7 @@ function mapDispatchToProps(dispatch) {
       onChange,
       onClickRemove,
       onToggleFilters,
+      openFiltersWithSelections,
       removeAllFilters,
       removeFilter,
       setParams,

packages/strapi-plugin-content-manager/admin/src/containers/ListPage/reducer.js

@@ -15,6 +15,7 @@ import {
   ON_CHANGE,
   ON_CLICK_REMOVE,
   ON_TOGGLE_FILTERS,
+  OPEN_FILTERS_WITH_SELECTION,
   REMOVE_ALL_FILTERS,
   REMOVE_FILTER,
   SET_PARAMS,
@@ -25,6 +26,8 @@ const initialState = fromJS({
   appliedFilters: List([]),
   count: 0,
   filters: List([]),
+  filtersUpdated: false,
+  filterToFocus: null,
   params: Map({
     _limit: 10,
     _page: 1,
@@ -32,7 +35,6 @@ const initialState = fromJS({
   }),
   records: List([]),
   showFilter: false,
-  filtersUpdated: false,
 });
 
 function listPageReducer(state = initialState, action) {
@@ -65,7 +67,13 @@ function listPageReducer(state = initialState, action) {
         .update('filters', list => list.splice(action.index, 1))
         .update('filtersUpdated', v => v = !v);
     case ON_TOGGLE_FILTERS:
-      return state.update('showFilter', v => !v);
+      return state
+        .update('filterToFocus', () => null)
+        .update('showFilter', v => !v);
+    case OPEN_FILTERS_WITH_SELECTION:
+      return state
+        .update('showFilter', () => true)
+        .update('filterToFocus', () => action.index);
     case REMOVE_ALL_FILTERS:
       return state
         .update('appliedFilters', () => List([]))