From fbfeebaa883703c40a848f571d9e0aaaec5d8c96 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 27 Sep 2019 16:34:59 -0500
Subject: [PATCH 1/3] derive state form prop updates

---
 src/components/selectable/selectable.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/src/components/selectable/selectable.tsx b/src/components/selectable/selectable.tsx
index 7eb1d8354ca..86ba38155c9 100644
--- a/src/components/selectable/selectable.tsx
+++ b/src/components/selectable/selectable.tsx
@@ -148,6 +148,27 @@ export class EuiSelectable extends Component<
     };
   }
 
+  static getDerivedStateFromProps(
+    nextProps: EuiSelectableProps,
+    prevState: EuiSelectableState
+  ) {
+    const { options } = nextProps;
+    const { activeOptionIndex, searchValue } = prevState;
+
+    const matchingOptions = getMatchingOptions(options, searchValue);
+
+    const stateUpdate = { visibleOptions: matchingOptions, activeOptionIndex };
+
+    if (
+      activeOptionIndex != null &&
+      activeOptionIndex >= matchingOptions.length
+    ) {
+      stateUpdate.activeOptionIndex = -1;
+    }
+
+    return stateUpdate;
+  }
+
   hasActiveOption = () => {
     return this.state.activeOptionIndex != null;
   };

From 7cecc83b3f5af2f9ce08f1e21a6f6ec21af63f38 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Fri, 27 Sep 2019 16:35:54 -0500
Subject: [PATCH 2/3] docs

---
 .../views/selectable/selectable_search.tsx    | 44 +++++++++++++------
 1 file changed, 30 insertions(+), 14 deletions(-)

diff --git a/src-docs/src/views/selectable/selectable_search.tsx b/src-docs/src/views/selectable/selectable_search.tsx
index 0d780caa96f..639300d2520 100644
--- a/src-docs/src/views/selectable/selectable_search.tsx
+++ b/src-docs/src/views/selectable/selectable_search.tsx
@@ -1,5 +1,8 @@
 import React, { Component, Fragment } from 'react';
 
+// @ts-ignore
+import { EuiLink } from '../../../../src/components/link';
+
 import { EuiSelectable } from '../../../../src/components/selectable';
 import { Option } from '../../../../src/components/selectable/types';
 import { Options } from './data';
@@ -23,20 +26,33 @@ export default class extends Component<{}, { options: Option[] }> {
     const { options } = this.state;
 
     return (
-      <EuiSelectable
-        searchable
-        searchProps={{
-          'data-test-subj': 'selectableSearchHere',
-        }}
-        options={options}
-        onChange={this.onChange}>
-        {(list, search) => (
-          <Fragment>
-            {search}
-            {list}
-          </Fragment>
-        )}
-      </EuiSelectable>
+      <Fragment>
+        <EuiLink
+          onClick={() => {
+            this.setState({
+              options: Options.map(option => ({
+                ...option,
+                checked: undefined,
+              })),
+            });
+          }}>
+          De-select all
+        </EuiLink>
+        <EuiSelectable
+          searchable
+          searchProps={{
+            'data-test-subj': 'selectableSearchHere',
+          }}
+          options={options}
+          onChange={this.onChange}>
+          {(list, search) => (
+            <Fragment>
+              {search}
+              {list}
+            </Fragment>
+          )}
+        </EuiSelectable>
+      </Fragment>
     );
   }
 }

From 53e6e18f4fc5429094de03381f82ba1a47a968a6 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Tue, 1 Oct 2019 09:10:39 -0500
Subject: [PATCH 3/3] CL; docs

---
 CHANGELOG.md                                        | 4 ++++
 src-docs/src/views/selectable/selectable_search.tsx | 9 ++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f26e8a6b796..5d68860295d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 - Update Elastic-Charts to version 13.0.0 and updated the theme object accordingly ([#2381](https://github.com/elastic/eui/pull/2381))
 
+**Bug fixes**
+
+- Fix `EuiSelectable` to accept programmatic updates to its `options` prop ([#2390](https://github.com/elastic/eui/pull/2390)) 
+
 ## [`14.4.0`](https://github.com/elastic/eui/tree/v14.4.0)
 
 - Migrate `EuiEmptyPrompt`and `EuiCard` to TS ([#2387](https://github.com/elastic/eui/pull/2387))
diff --git a/src-docs/src/views/selectable/selectable_search.tsx b/src-docs/src/views/selectable/selectable_search.tsx
index 639300d2520..e94c755e1c3 100644
--- a/src-docs/src/views/selectable/selectable_search.tsx
+++ b/src-docs/src/views/selectable/selectable_search.tsx
@@ -1,7 +1,6 @@
 import React, { Component, Fragment } from 'react';
 
-// @ts-ignore
-import { EuiLink } from '../../../../src/components/link';
+import { EuiButtonEmpty } from '../../../../src/components/button';
 
 import { EuiSelectable } from '../../../../src/components/selectable';
 import { Option } from '../../../../src/components/selectable/types';
@@ -27,7 +26,7 @@ export default class extends Component<{}, { options: Option[] }> {
 
     return (
       <Fragment>
-        <EuiLink
+        <EuiButtonEmpty
           onClick={() => {
             this.setState({
               options: Options.map(option => ({
@@ -36,8 +35,8 @@ export default class extends Component<{}, { options: Option[] }> {
               })),
             });
           }}>
-          De-select all
-        </EuiLink>
+          Deselect all
+        </EuiButtonEmpty>
         <EuiSelectable
           searchable
           searchProps={{