Merge pull request #5309 from melloware/PR5308

Fix #5308: Dropdown icon pass overlay visible state
primefaces · Nov 14, 2023 · 20e6f2a · 20e6f2a
2 parents 02f78ab + f83b102
commit 20e6f2a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/components/doc/dropdown/templatedoc.js b/components/doc/dropdown/templatedoc.js
@@ -1,5 +1,7 @@
 import { useState } from 'react';
 import { Dropdown } from '../../lib/dropdown/Dropdown';
+import { ChevronDownIcon } from '../../lib/icons/chevrondown';
+import { ChevronRightIcon } from '../../lib/icons/chevronright';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
@@ -57,11 +59,17 @@ export function TemplateDoc(props) {
     const code = {
         basic: `
 <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
-    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} />
+    valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate}
+    dropdownIcon={(opts) => {
+        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+    }} 
+/>
         `,
         javascript: `
 import React, { useState } from "react";
 import { Dropdown } from 'primereact/dropdown';
+import { ChevronDownIcon } from 'primereact/icons/chevrondown';
+import { ChevronRightIcon } from 'primereact/icons/chevronright';
 
 export default function TemplateDemo() {
     const [selectedCountry, setSelectedCountry] = useState(null);
@@ -117,14 +125,19 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Dropdown value={selectedCountry} onChange={(e) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
-                valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} />
+                valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} 
+                dropdownIcon={(opts) => {
+                    return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                }}/>
         </div>    
     )
 }
         `,
         typescript: `
 import React, { useState } from "react";
 import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
+import { CheckIcon } from 'primereact/icons/check';
+import { StarIcon } from 'primereact/icons/star';
 
 interface Country {
     name: string;
@@ -185,7 +198,10 @@ export default function TemplateDemo() {
     return (
         <div className="card flex justify-content-center">
             <Dropdown value={selectedCountry} onChange={(e: DropdownChangeEvent) => setSelectedCountry(e.value)} options={countries} optionLabel="name" placeholder="Select a Country" 
-                valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} />
+                valueTemplate={selectedCountryTemplate} itemTemplate={countryOptionTemplate} className="w-full md:w-14rem" panelFooterTemplate={panelFooterTemplate} 
+                dropdownIcon={(opts) => {
+                    return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                }}/>/>
         </div>    
     )
 }
@@ -210,6 +226,9 @@ export default function TemplateDemo() {
                     itemTemplate={countryOptionTemplate}
                     panelFooterTemplate={panelFooterTemplate}
                     className="w-full md:w-14rem"
+                    dropdownIcon={(opts) => {
+                        return opts.iconProps['data-pr-overlay-visible'] ? <ChevronRightIcon {...opts.iconProps} /> : <ChevronDownIcon {...opts.iconProps} />;
+                    }}
                 />
             </div>
             <DocSectionCode code={code} />

diff --git a/components/lib/dropdown/Dropdown.js b/components/lib/dropdown/Dropdown.js
@@ -809,7 +809,8 @@ export const Dropdown = React.memo(
         const createDropdownIcon = () => {
             const dropdownIconProps = mergeProps(
                 {
-                    className: cx('dropdownIcon')
+                    className: cx('dropdownIcon'),
+                    'data-pr-overlay-visible': overlayVisibleState
                 },
                 ptm('dropdownIcon')
             );