patternfly · jeff-phillips-18 · Aug 30, 2018 · Aug 27, 2018
diff --git a/packages/patternfly-3/patternfly-react/package.json b/packages/patternfly-3/patternfly-react/package.json
@@ -28,7 +28,7 @@
     "breakjs": "^1.0.0",
     "classnames": "^2.2.5",
     "css-element-queries": "^1.0.1",
-    "patternfly": "^3.52.1",
+    "patternfly": "^3.52.4",
     "react-bootstrap": "^0.32.1",
     "react-bootstrap-switch": "^15.5.3",
     "react-bootstrap-typeahead": "^3.1.3",

diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/Filter.test.js b/packages/patternfly-3/patternfly-react/src/components/Filter/Filter.test.js
@@ -19,7 +19,7 @@ test('Filter input renders properly', () => {
   expect(component.render()).toMatchSnapshot();
 });
 
-test('Filter select renders propeurly', () => {
+test('Filter select renders properly', () => {
   const component = mount(
     <Filter>
       <Filter.TypeSelector filterTypes={mockFilterExampleFields} currentFilterType={mockFilterExampleFields[2]} />

diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategorySelector.js b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategorySelector.js
@@ -28,15 +28,14 @@ const FilterCategorySelector = ({
     let menuId = 'filterCategoryMenu';
     menuId += id ? `_${id}` : '';
 
+    const dropdownClasses = classNames('filter-pf-select-dropdown', {
+      'filter-selected': title !== placeholder
+    });
+
     return (
       <div className={classes} {...props}>
         <div className="filter-pf-select">
-          <DropdownButton title={title} id={menuId} className="filter-pf-select-dropdown">
-            {placeholder && (
-              <MenuItem title={placeholder} key="Placeholder" onSelect={onFilterCategorySelected}>
-                {placeholder}
-              </MenuItem>
-            )}
+          <DropdownButton title={title} id={menuId} className={dropdownClasses}>
             {filterCategories &&
               filterCategories.map((item, index) => {
                 const menuItemClasses = {

diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterCategoryValueSelector.js
@@ -27,14 +27,13 @@ const FilterCategoryValueSelector = ({
     let menuId = 'filterCategoryMenu';
     menuId += id ? `_${id}` : '';
 
+    const dropdownClasses = classNames('filter-pf-category-select-value', 'filter-pf-select-dropdown', {
+      'filter-selected': title !== placeholder
+    });
+
     return (
       <div className={classes} {...props}>
-        <DropdownButton className="filter-pf-category-select-value filter-pf-select-dropdown" title={title} id={menuId}>
-          {placeholder && (
-            <MenuItem title={placeholder} key="Placeholder" onSelect={() => onCategoryValueSelected()}>
-              {placeholder}
-            </MenuItem>
-          )}
+        <DropdownButton className={dropdownClasses} title={title} id={menuId}>
           {categoryValues &&
             categoryValues.map((item, index) => {
               const menuItemClasses = {

diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/FilterValueSelector.js b/packages/patternfly-3/patternfly-react/src/components/Filter/FilterValueSelector.js
@@ -27,14 +27,13 @@ const FilterValueSelector = ({
     let menuId = 'filterCategoryMenu';
     menuId += id ? `_${id}` : '';
 
+    const dropdownClasses = classNames('filter-pf-select-dropdown', {
+      'filter-selected': title !== placeholder
+    });
+
     return (
       <div className={classes} {...props}>
-        <DropdownButton title={title} id={menuId} className="filter-pf-select-dropdown">
-          {placeholder && (
-            <MenuItem title={placeholder} key="Placeholder" onSelect={onFilterValueSelected}>
-              {placeholder}
-            </MenuItem>
-          )}
+        <DropdownButton title={title} id={menuId} className={dropdownClasses}>
           {filterValues &&
             filterValues.map((item, index) => {
               const menuItemClasses = {

diff --git a/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js b/packages/patternfly-3/patternfly-react/src/components/Filter/__mocks__/mockFilterExample.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Filter, FormControl, Toolbar } from '../../../index';
+import { findIndex, find, remove } from 'lodash';
 
 export const mockFilterExampleFields = [
   {
@@ -125,6 +126,10 @@ export class MockFilterExample extends React.Component {
       filterText += value;
     }
 
+    if ((field.filterType === 'select' || field.filterType === 'complex-select') && this.filterExists(field.title)) {
+      this.enforceSingleSelect(field.title);
+    }
+
     const activeFilters = [...this.state.activeFilters, { label: filterText }];
     this.setState({ activeFilters });
   };
@@ -147,6 +152,23 @@ export class MockFilterExample extends React.Component {
     }
   };
 
+  filterExists = fieldTitle => {
+    const { activeFilters } = this.state;
+    const index = findIndex(activeFilters, filter => filter.label.startsWith(fieldTitle));
+    return index !== -1;
+  };
+
+  getFilterValue = fieldTitle => {
+    const { activeFilters } = this.state;
+    const existingFilter = find(activeFilters, filter => filter.label.startsWith(fieldTitle));
+    return existingFilter.label.substring(existingFilter.label.indexOf(': ') + 2);
+  };
+
+  enforceSingleSelect = fieldTitle => {
+    const { activeFilters } = this.state;
+    remove(activeFilters, filter => filter.label.startsWith(fieldTitle));
+  };
+
   removeFilter = filter => {
     const { activeFilters } = this.state;
 
@@ -160,12 +182,26 @@ export class MockFilterExample extends React.Component {
   selectFilterType = filterType => {
     const { currentFilterType } = this.state;
     if (currentFilterType !== filterType) {
-      this.setState(prevState => ({
-        currentValue: '',
+      let newCurrentValue = '';
+      let newFilterCategory;
+      // set selected value(s) in dropdown(s) if filter exists
+      if (filterType.filterType === 'select' || filterType.filterType === 'complex-select') {
+        if (this.filterExists(filterType.title)) {
+          const filterValue = this.getFilterValue(filterType.title);
+          if (filterType.filterType === 'select') {
+            newCurrentValue = filterValue;
+          } else {
+            const categoryValues = filterValue.split('-');
+            [newFilterCategory, newCurrentValue] = categoryValues;
+            newFilterCategory = find(filterType.filterCategories, filterCat => filterCat.title === newFilterCategory);
+          }
+        }
+      }
+      this.setState({
         currentFilterType: filterType,
-        filterCategory: filterType.filterType === 'complex-select' ? undefined : prevState.filterCategory,
-        categoryValue: filterType.filterType === 'complex-select' ? '' : prevState.categoryValue
-      }));
+        currentValue: newCurrentValue,
+        filterCategory: newFilterCategory
+      });
     }
   };
 
@@ -179,6 +215,16 @@ export class MockFilterExample extends React.Component {
       return null;
     }
 
+    if (currentFilterType.filterType === 'select' || currentFilterType.filterType === 'complex-select') {
+      // remove selected value in dropdown(s) if filter was removed
+      if (currentValue !== '' && !this.filterExists(currentFilterType.title)) {
+        this.setState({
+          currentValue: '',
+          filterCategory: currentFilterType.filterType === 'complex-select' ? '' : filterCategory
+        });
+      }
+    }
+
     if (currentFilterType.filterType === 'select') {
       return (
         <Filter.ValueSelector
@@ -261,6 +307,7 @@ export class MockFilterExample extends React.Component {
 export const mockFilterExampleSource = `
 import React from 'react';
 import { Filter, FormControl, Toolbar } from '../../../index';
+import { findIndex, find, remove } from 'lodash';
 
 export const mockFilterExampleFields = [
   {
@@ -359,26 +406,36 @@ export class MockFilterExample extends React.Component {
       filterText += value;
     }
 
+    if ((field.filterType === 'select' || field.filterType === 'complex-select') && this.filterExists(field.title)) {
+      this.enforceSingleSelect(field.title);
+    }
+
     let activeFilters = [...this.state.activeFilters, { label: filterText }];
     this.setState({ activeFilters: activeFilters });
   };
 
   selectFilterType = filterType => {
     const { currentFilterType } = this.state;
     if (currentFilterType !== filterType) {
-      this.setState(prevState => {
-        return {
-          currentValue: '',
-          currentFilterType: filterType,
-          filterCategory:
-            filterType.filterType === 'complex-select'
-              ? undefined
-              : prevState.filterCategory,
-          categoryValue:
-            filterType.filterType === 'complex-select'
-              ? ''
-              : prevState.categoryValue
-        };
+      let newCurrentValue = '';
+      let newFilterCategory;
+      // set selected value(s) in dropdown(s) if filter exists
+      if (filterType.filterType === 'select' || filterType.filterType === 'complex-select') {
+        if (this.filterExists(filterType.title)) {
+          const filterValue = this.getFilterValue(filterType.title);
+          if (filterType.filterType === 'select') {
+            newCurrentValue = filterValue;
+          } else {
+            const categoryValues = filterValue.split('-');
+            [newFilterCategory, newCurrentValue] = categoryValues;
+            newFilterCategory = find(filterType.filterCategories, filterCat => filterCat.title === newFilterCategory);
+          }
+        }
+      }
+      this.setState({
+        currentFilterType: filterType,
+        currentValue: newCurrentValue,
+        filterCategory: newFilterCategory
       });
     }
   }
@@ -431,6 +488,23 @@ export class MockFilterExample extends React.Component {
     }
   }
 
+  filterExists = fieldTitle => {
+    const { activeFilters } = this.state;
+    const index = findIndex(activeFilters, filter => filter.label.startsWith(fieldTitle));
+    return index !== -1;
+  };
+
+  getFilterValue = fieldTitle => {
+    const { activeFilters } = this.state;
+    const existingFilter = find(activeFilters, filter => filter.label.startsWith(fieldTitle));
+    return existingFilter.label.substring(existingFilter.label.indexOf(': ') + 2);
+  };
+
+  enforceSingleSelect = fieldTitle => {
+    const { activeFilters } = this.state;
+    remove(activeFilters, filter => filter.label.startsWith(fieldTitle));
+  };
+
   removeFilter = filter => {
     const { activeFilters } = this.state;
 
@@ -454,6 +528,16 @@ export class MockFilterExample extends React.Component {
       return null;
     }
 
+    if (currentFilterType.filterType === 'select' || currentFilterType.filterType === 'complex-select') {
+      // remove selected value in dropdown(s) if filter was removed
+      if (currentValue !== '' && !this.filterExists(currentFilterType.title)) {
+        this.setState({
+          currentValue: '',
+          filterCategory: currentFilterType.filterType === 'complex-select' ? '' : filterCategory
+        });
+      }
+    }
+
     if (currentFilterType.filterType === 'select') {
       return (
         <Filter.ValueSelector

diff --git a/...ges/patternfly-3/patternfly-react/src/components/Filter/__snapshots__/Filter.test.js.snap b/...ges/patternfly-3/patternfly-react/src/components/Filter/__snapshots__/Filter.test.js.snap
@@ -162,7 +162,7 @@ exports[`Filter categories renders properly 1`] = `
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="filter-pf-select-dropdown dropdown-toggle btn btn-default"
+              class="filter-pf-select-dropdown filter-selected dropdown-toggle btn btn-default"
               id="filterCategoryMenu"
               role="button"
               type="button"
@@ -177,19 +177,6 @@ exports[`Filter categories renders properly 1`] = `
               class="dropdown-menu"
               role="menu"
             >
-              <li
-                class=""
-                role="presentation"
-              >
-                <a
-                  href="#"
-                  role="menuitem"
-                  tabindex="-1"
-                  title="Filter by Car Make"
-                >
-                  Filter by Car Make
-                </a>
-              </li>
               <li
                 class="selected"
                 role="presentation"
@@ -226,7 +213,7 @@ exports[`Filter categories renders properly 1`] = `
             <button
               aria-expanded="false"
               aria-haspopup="true"
-              class="filter-pf-category-select-value filter-pf-select-dropdown dropdown-toggle btn btn-default"
+              class="filter-pf-category-select-value filter-pf-select-dropdown filter-selected dropdown-toggle btn btn-default"
               id="filterCategoryMenu"
               role="button"
               type="button"
@@ -241,19 +228,6 @@ exports[`Filter categories renders properly 1`] = `
               class="dropdown-menu"
               role="menu"
             >
-              <li
-                class=""
-                role="presentation"
-              >
-                <a
-                  href="#"
-                  role="menuitem"
-                  tabindex="-1"
-                  title="Filter by Car Model"
-                >
-                  Filter by Car Model
-                </a>
-              </li>
               <li
                 class="selected"
                 role="presentation"
@@ -509,7 +483,7 @@ exports[`Filter renders properly in a Toolbar 1`] = `
 </div>
 `;
 
-exports[`Filter select renders propeurly 1`] = `
+exports[`Filter select renders properly 1`] = `
 <div
   class="filter-pf form-group"
 >
@@ -603,7 +577,7 @@ exports[`Filter select renders propeurly 1`] = `
           <button
             aria-expanded="false"
             aria-haspopup="true"
-            class="filter-pf-select-dropdown dropdown-toggle btn btn-default"
+            class="filter-pf-select-dropdown filter-selected dropdown-toggle btn btn-default"
             id="filterCategoryMenu"
             role="button"
             type="button"

diff --git a/yarn.lock b/yarn.lock
@@ -11428,9 +11428,9 @@ patternfly-bootstrap-treeview@~2.1.0:
     bootstrap "3.3.x"
     jquery ">= 2.1.x"
 
-patternfly@^3.52.1:
-  version "3.52.1"
-  resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.52.1.tgz#0c6f067ec987f4f16b93acb54e8f7de02300eead"
+patternfly@^3.52.1, patternfly@^3.52.4:
+  version "3.54.2"
+  resolved "https://registry.yarnpkg.com/patternfly/-/patternfly-3.54.2.tgz#58b4b424462c4b01aaebf41db2da3bcd63bedfbf"
   dependencies:
     bootstrap "~3.3.7"
     font-awesome "^4.7.0"