Pass onRenderItem to onRenderContainer in the Dropdown component (#25255

) * Pass onRenderItem to onRenderContainer * Change file
microsoft · Oct 20, 2022 · 3757c89 · 3757c89
1 parent 59cc34e
commit 3757c89
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/change/@fluentui-react-18b72fa6-4c4e-4585-b65c-925cc6f1639f.json b/change/@fluentui-react-18b72fa6-4c4e-4585-b65c-925cc6f1639f.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Pass onRenderItem to Dropdown's onRenderContainer to allow use of onRenderList with default or custom onRenderItem",
+  "packageName": "@fluentui/react",
+  "email": "aepshtein@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/Dropdown/Dropdown.base.tsx b/packages/react/src/components/Dropdown/Dropdown.base.tsx
@@ -316,6 +316,7 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
       onRenderContainer = this._onRenderContainer,
       onRenderCaretDown = this._onRenderCaretDown,
       onRenderLabel = this._onRenderLabel,
+      onRenderItem = this._onRenderItem,
       hoisted: { selectedIndices },
     } = props;
     const { isOpen, calloutRenderEdge, hasFocus } = this.state;
@@ -397,7 +398,15 @@ class DropdownInternal extends React.Component<IDropdownInternalProps, IDropdown
           </span>
           <span className={this._classNames.caretDownWrapper}>{onRenderCaretDown(props, this._onRenderCaretDown)}</span>
         </div>
-        {isOpen && onRenderContainer({ ...props, onDismiss: this._onDismiss }, this._onRenderContainer)}
+        {isOpen &&
+          onRenderContainer(
+            {
+              ...props,
+              onDismiss: this._onDismiss,
+              onRenderItem,
+            },
+            this._onRenderContainer,
+          )}
         {hasErrorMessage && (
           <div role="alert" id={errorMessageId} className={this._classNames.errorMessage}>
             {errorMessage}