fix custom trigger support in styled select (microsoft#1542)

meunice · Mar 19, 2019 · c734634 · c734634
1 parent ebd3dfa
commit c734634
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 13 deletions.
diff --git a/packages/fast-components-react-base/src/select/select.spec.tsx b/packages/fast-components-react-base/src/select/select.spec.tsx
@@ -260,17 +260,17 @@ describe("select", (): void => {
         expect(displayFormatter).toHaveBeenCalledTimes(2);
     });
 
-    test("Custom display render function is called", (): void => {
-        const displayRenderFn: any = jest.fn();
-        displayRenderFn.mockReturnValue("Test");
+    test("Custom trigger render function is called", (): void => {
+        const triggerRenderFn: any = jest.fn();
+        triggerRenderFn.mockReturnValue("Test");
         const rendered: any = mount(
-            <Select trigger={displayRenderFn}>
+            <Select trigger={triggerRenderFn}>
                 {itemA}
                 {itemB}
                 {itemC}
             </Select>
         );
-        expect(displayRenderFn).toHaveBeenCalledTimes(1);
+        expect(triggerRenderFn).toHaveBeenCalledTimes(1);
     });
 
     test("Hidden select element exists and it's value and props are populated", (): void => {

diff --git a/packages/fast-components-react-base/src/select/select.tsx b/packages/fast-components-react-base/src/select/select.tsx
@@ -142,7 +142,7 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, Select
                 onKeyDown={this.handleKeydown}
                 onClick={this.handleClick}
             >
-                {this.renderContentDisplay()}
+                {this.renderTrigger()}
                 {this.renderHiddenSelectElement()}
                 {this.renderMenu()}
             </div>
@@ -223,14 +223,14 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, Select
     };
 
     /**
-     * Determine which function to use to render content display (ie. the part of the control that shows when the menu isn't open)
+     * Determine which function to use to render the trigger (ie. the part of the control that shows when the menu isn't open)
      * and invokes it
      */
-    private renderContentDisplay(): React.ReactNode {
+    private renderTrigger(): React.ReactNode {
         if (this.props.trigger !== undefined) {
             return this.props.trigger(this.props, this.state);
         } else {
-            return this.defaultDisplayRenderFunction(this.props, this.state);
+            return this.defaultTriggerRenderFunction(this.props, this.state);
         }
     }
 
@@ -307,7 +307,7 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, Select
     /**
      * The default function that renders an unstyled content display
      */
-    private defaultDisplayRenderFunction = (
+    private defaultTriggerRenderFunction = (
         props: SelectProps,
         state: SelectState
     ): React.ReactNode => {

diff --git a/packages/fast-components-react-msft/src/select/select.spec.tsx b/packages/fast-components-react-msft/src/select/select.spec.tsx
@@ -51,4 +51,17 @@ describe("button", (): void => {
         expect(trigger.prop("aria-haspopup")).toEqual(true);
         expect(trigger.prop("aria-expanded")).toEqual(false);
     });
+
+    test("Custom trigger render function is called", (): void => {
+        const triggerRenderFn: any = jest.fn();
+        triggerRenderFn.mockReturnValue("Test");
+        const rendered: any = mount(
+            <Select trigger={triggerRenderFn}>
+                {itemA}
+                {itemB}
+                {itemC}
+            </Select>
+        );
+        expect(triggerRenderFn).toHaveBeenCalledTimes(1);
+    });
 });
diff --git a/packages/fast-components-react-msft/src/select/select.tsx b/packages/fast-components-react-msft/src/select/select.tsx
@@ -28,17 +28,24 @@ class Select extends Foundation<SelectHandledProps, SelectUnhandledProps, {}> {
                 {...this.unhandledProps()}
                 managedClasses={this.props.managedClasses}
                 disabled={this.props.disabled}
-                trigger={this.renderTrigger}
+                trigger={
+                    typeof this.props.trigger === "function"
+                        ? this.props.trigger
+                        : this.defaultTriggerRenderFunction
+                }
             >
                 {this.props.children}
             </BaseSelect>
         );
     }
 
     /**
-     * The function that renders a styled content display
+     * The function that renders the default styled trigger
      */
-    public renderTrigger = (props: SelectProps, state: SelectState): React.ReactNode => {
+    private defaultTriggerRenderFunction = (
+        props: SelectProps,
+        state: SelectState
+    ): React.ReactNode => {
         if (props.multiselectable) {
             return null;
         }