EuiFilterSelect now retains the order of filters

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Updated `EuiFilterSelect` to retain the order of its filters ([#3063](https://github.com/elastic/eui/pull/3063))
 - Added `href` prop to `EuiBadge` ([#3009](https://github.com/elastic/eui/pull/3009))
 - Added props descriptions for `EuiComboBox` ([#3007](https://github.com/elastic/eui/pull/3007))
 - Exported `dateFormatAliases` as a part of the public API ([#3043](https://github.com/elastic/eui/pull/3043))

src/components/search_bar/filters/__snapshots__/field_value_selection_filter.test.tsx.snap

@@ -28,31 +28,31 @@ exports[`FieldValueSelectionFilter active - field is global 1`] = `
     className="euiFilterSelect__items"
   >
     <EuiFilterSelectItem
-      checked="on"
-      key="2"
+      key="0"
       onClick={[Function]}
       onKeyDown={[Function]}
       showIcons={true}
     >
-      <div>
-        bug
-      </div>
+      feature
     </EuiFilterSelectItem>
     <EuiFilterSelectItem
-      key="0"
+      key="1"
       onClick={[Function]}
       onKeyDown={[Function]}
       showIcons={true}
     >
-      feature
+      Text
     </EuiFilterSelectItem>
     <EuiFilterSelectItem
-      key="1"
+      checked="on"
+      key="2"
       onClick={[Function]}
       onKeyDown={[Function]}
       showIcons={true}
     >
-      Text
+      <div>
+        bug
+      </div>
     </EuiFilterSelectItem>
   </div>
 </EuiPopover>
@@ -86,31 +86,31 @@ exports[`FieldValueSelectionFilter active - fields in options 1`] = `
     className="euiFilterSelect__items"
   >
     <EuiFilterSelectItem
-      checked="on"
-      key="2"
+      key="0"
       onClick={[Function]}
       onKeyDown={[Function]}
       showIcons={true}
     >
-      <div>
-        bug
-      </div>
+      feature
     </EuiFilterSelectItem>
     <EuiFilterSelectItem
-      key="0"
+      key="1"
       onClick={[Function]}
       onKeyDown={[Function]}
       showIcons={true}
     >
-      feature
+      Text
     </EuiFilterSelectItem>
     <EuiFilterSelectItem
-      key="1"
+      checked="on"
+      key="2"
       onClick={[Function]}
       onKeyDown={[Function]}
       showIcons={true}
     >
-      Text
+      <div>
+        bug
+      </div>
     </EuiFilterSelectItem>
   </div>
 </EuiPopover>

src/components/search_bar/filters/field_value_selection_filter.tsx

@@ -84,7 +84,6 @@ export class FieldValueSelectionFilter extends Component<
 
   constructor(props: FieldValueSelectionFilterProps) {
     super(props);
-
     const { options } = props.config;
 
     const preloadedOptions = isArray(options)
@@ -127,11 +126,46 @@ export class FieldValueSelectionFilter extends Component<
     this.setState({ options: null, error: null });
     loader()
       .then(options => {
+        const items: {
+          on: FieldValueOptionType[];
+          off: FieldValueOptionType[];
+          rest: FieldValueOptionType[];
+        } = {
+          on: [],
+          off: [],
+          rest: [],
+        };
+
+        const { query, config } = this.props;
+
+        const multiSelect = this.resolveMultiSelect();
+
+        if (options) {
+          options.forEach(op => {
+            const optionField = op.field || config.field;
+            if (optionField) {
+              const clause =
+                multiSelect === 'or'
+                  ? query.getOrFieldClause(optionField, op.value)
+                  : query.getSimpleFieldClause(optionField, op.value);
+              const checked = this.resolveChecked(clause);
+              if (!checked) {
+                items.rest.push(op);
+              } else if (checked === 'on') {
+                items.on.push(op);
+              } else {
+                items.off.push(op);
+              }
+            }
+            return;
+          });
+        }
+
         this.setState({
           error: null,
           options: {
             all: options,
-            shown: options,
+            shown: [...items.on, ...items.off, ...items.rest],
           },
         });
       })
@@ -370,15 +404,7 @@ export class FieldValueSelectionFilter extends Component<
       return;
     }
 
-    const items: {
-      on: ReactElement[];
-      off: ReactElement[];
-      rest: ReactElement[];
-    } = {
-      on: [],
-      off: [],
-      rest: [],
-    };
+    const items: ReactElement[] = [];
 
     this.state.options.shown.forEach((option, index) => {
       const optionField = option.field || field;
@@ -411,21 +437,10 @@ export class FieldValueSelectionFilter extends Component<
         </EuiFilterSelectItem>
       );
 
-      if (!checked) {
-        items.rest.push(item);
-      } else if (checked === 'on') {
-        items.on.push(item);
-      } else {
-        items.off.push(item);
-      }
-      return items;
+      items.push(item);
     });
 
-    return (
-      <div className="euiFilterSelect__items">
-        {[...items.on, ...items.off, ...items.rest]}
-      </div>
-    );
+    return <div className="euiFilterSelect__items">{items}</div>;
   }
 
   resolveChecked(clause: Clause | undefined): 'on' | 'off' | undefined {