isMenuOpened responds to prop changes (microsoft#3459)

vnextcoder · Jul 9, 2020 · 5852740 · 5852740
1 parent ac2fbe0
commit 5852740
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 0 deletions.
diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.spec.tsx
@@ -263,6 +263,28 @@ describe("auto suggest", (): void => {
         expect(input.prop("aria-expanded")).toBe(false);
     });
 
+    test("menu should open and close as the isMenuOpen prop changes", (): void => {
+        const rendered: any = mount(
+            <AutoSuggest listboxId="listboxId" isMenuOpen={false}>
+                {itemA}
+                {itemB}
+                {itemC}
+            </AutoSuggest>
+        );
+
+        expect(rendered.state("isMenuOpen")).toBe(false);
+
+        rendered.setProps({
+            isMenuOpen: true,
+        });
+        expect(rendered.state("isMenuOpen")).toBe(true);
+
+        rendered.setProps({
+            isMenuOpen: false,
+        });
+        expect(rendered.state("isMenuOpen")).toBe(false);
+    });
+
     // Test is incompatible with Jest 25.x, refer to issue #2882
     xtest("arrow keys properly traverse the listbox and input region and cause focus and value to changes appropriately", (): void => {
         const container: HTMLDivElement = document.createElement("div");

diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.stories.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.stories.tsx
@@ -131,4 +131,22 @@ storiesOf("AutoSuggest", module)
                 Turtle
             </ListboxItem>
         </AutoSuggest>
+    ))
+    .add("Menu open", () => (
+        <AutoSuggest
+            {...favoriteAnimalProps}
+            onValueChange={action("onValueChange")}
+            onInvoked={action("onInvoked")}
+            isMenuOpen={true}
+        >
+            <ListboxItem id={uniqueId()} value="Cat">
+                Cat
+            </ListboxItem>
+            <ListboxItem id={uniqueId()} value="Dog">
+                Dog
+            </ListboxItem>
+            <ListboxItem id={uniqueId()} value="Turtle">
+                Turtle
+            </ListboxItem>
+        </AutoSuggest>
     ));
diff --git a/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.tsx b/packages/react/fast-components-react-base/src/auto-suggest/auto-suggest.tsx
@@ -89,6 +89,11 @@ class AutoSuggest extends Foundation<
 
     public componentDidUpdate(prevProps: AutoSuggestProps): void {
         if (
+            this.props.isMenuOpen !== undefined &&
+            this.props.isMenuOpen !== prevProps.isMenuOpen
+        ) {
+            this.toggleMenu(this.props.isMenuOpen);
+        } else if (
             !this.state.isMenuOpen &&
             React.Children.count(this.renderChildren(prevProps.children)) === 0 &&
             React.Children.count(this.renderChildren()) > 0 &&