Fix #3692: Button tooltip remaining displayed after disable (#3696)

primefaces · Nov 23, 2022 · 8a4cea1 · 8a4cea1
1 parent cbd0ae4
commit 8a4cea1
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 26 deletions.
diff --git a/components/doc/megamenu/templatingdoc.js b/components/doc/megamenu/templatingdoc.js
@@ -120,7 +120,7 @@ export function TemplatingDoc(props) {
             ]
         }
     ];
-    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} height="40" className="mr-2"></img>;
     const end = <InputText placeholder="Search" type="text" style={{ width: '12rem' }} />;
 
     const code = {
@@ -244,7 +244,7 @@ export default function TemplatingDoc() {
             ]
         }
     ];
-    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
     const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
 
     return (
@@ -369,7 +369,7 @@ export default function TemplatingDoc() {
             ]
         }
     ];
-    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
     const end = <InputText placeholder="Search" type="text" style={{width: '12rem'}} />;
 
     return (

diff --git a/components/doc/menubar/customdoc.js b/components/doc/menubar/customdoc.js
@@ -128,7 +128,7 @@ export function CustomDoc(props) {
         }
     ];
 
-    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} height="40" className="mr-2"></img>;
     const end = <InputText placeholder="Search" type="text" />;
 
     const code = {
@@ -268,7 +268,7 @@ const items = [
         }
     ];
 
-    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
     const end = <InputText placeholder="Search" type="text" />;
 
     return (
@@ -409,7 +409,7 @@ const items = [
         }
     ];
 
-    const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
+    const start = <img alt="logo" src="images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="mr-2"></img>;
     const end = <InputText placeholder="Search" type="text" />;
     
     return (

diff --git a/components/doc/messages/staticdoc.js b/components/doc/messages/staticdoc.js
@@ -36,7 +36,7 @@ export default function StaticDoc() {
         msgs1.current.show({
             severity: 'info', sticky: true, content: (
                 <React.Fragment>
-                    <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" />
+                    <img alt="logo" src="images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" />
                     <div className="ml-2">Always bet on Prime.</div>
                 </React.Fragment>
             )
@@ -59,7 +59,7 @@ export default function StaticDoc() {
         msgs1.current?.show({
             severity: 'info', sticky: true, content: (
                 <React.Fragment>
-                    <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" />
+                    <img alt="logo" src="images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} width="32" />
                     <div className="ml-2">Always bet on Prime.</div>
                 </React.Fragment>
             )

diff --git a/components/doc/tooltip/mousetrackdoc.js b/components/doc/tooltip/mousetrackdoc.js
@@ -1,5 +1,5 @@
-import { Tooltip } from '../../lib/tooltip/Tooltip';
 import { Button } from '../../lib/button/Button';
+import { Tooltip } from '../../lib/tooltip/Tooltip';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
@@ -9,7 +9,7 @@ export function MouseTrackDoc(props) {
 <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} /
 
 <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
-<img className="logo ml-2" alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+<img className="logo ml-2" alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
         `,
         javascript: `
 import { Tooltip } from 'primereact/tooltip';
@@ -22,7 +22,7 @@ export default function MouseTrackDoc() {
             <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
 
             <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
-            <img className="logo ml-2" alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+            <img className="logo ml-2" alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
         </div>
     );
 }
@@ -38,7 +38,7 @@ export default function MouseTrackDoc() {
             <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
 
             <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
-            <img className="logo ml-2" alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+            <img className="logo ml-2" alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
         </div>
     );
 }
@@ -54,7 +54,7 @@ export default function MouseTrackDoc() {
                 <Button type="button" label="Save" icon="pi pi-check" tooltip="Save" tooltipOptions={{ position: 'bottom', mouseTrack: true, mouseTrackTop: 15 }} />
 
                 <Tooltip target=".logo" mouseTrack mouseTrackLeft={10} />
-                <img className="logo ml-2" alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+                <img className="logo ml-2" alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/tooltip/templatedoc.js b/components/doc/tooltip/templatedoc.js
@@ -1,13 +1,13 @@
-import { Tooltip } from '../../lib/tooltip/Tooltip';
 import { Button } from '../../lib/button/Button';
+import { Tooltip } from '../../lib/tooltip/Tooltip';
 import { DocSectionCode } from '../common/docsectioncode';
 import { DocSectionText } from '../common/docsectiontext';
 
 export function TemplateDoc(props) {
     const code = {
         basic: `
 <Tooltip target=".custom-tooltip-btn">
-    <img alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+    <img alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
 </Tooltip>
 
 <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
@@ -21,7 +21,7 @@ export default function TemplateDoc() {
     return (
         <div>
             <Tooltip target=".custom-tooltip-btn">
-                <img alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+                <img alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
             </Tooltip>
 
             <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
@@ -34,11 +34,11 @@ import { Tooltip } from 'primereact/tooltip';
 import { Button } from 'primereact/button';
 
 export default function TemplateDoc() {
-    
+
     return (
         <div>
             <Tooltip target=".custom-tooltip-btn">
-                <img alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+                <img alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
             </Tooltip>
 
             <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />
@@ -55,7 +55,7 @@ export default function TemplateDoc() {
             </DocSectionText>
             <div className="card flex align-items-center justify-content-center">
                 <Tooltip target=".custom-tooltip-btn">
-                    <img alt="logo" src="showcase/images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
+                    <img alt="logo" src="images/logo.png" onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')} data-pr-tooltip="PrimeReact-Logo" height="80px" />
                 </Tooltip>
 
                 <Button className="custom-tooltip-btn" type="button" label="Save" icon="pi pi-check" />

diff --git a/components/lib/button/Button.js b/components/lib/button/Button.js
@@ -43,8 +43,9 @@ export const Button = React.memo(
             return null;
         };
 
-        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
         const disabled = props.disabled || props.loading;
+        const showTooltip = !disabled || (props.tooltipOptions && props.tooltipOptions.showOnDisabled);
+        const hasTooltip = ObjectUtils.isNotEmpty(props.tooltip) && showTooltip;
         const otherProps = ObjectUtils.findDiffKeys(props, Button.defaultProps);
         const className = classNames('p-button p-component', props.className, {
             'p-button-icon-only': (props.icon || (props.loading && props.loadingIcon)) && !props.label && !props.children,

diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PrimeReact from '../api/Api';
-import { useMountEffect, useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
+import { useOverlayScrollListener, useResizeListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Portal } from '../portal/Portal';
 import { classNames, DomHandler, ObjectUtils, ZIndexUtils } from '../utils/Utils';
 
@@ -388,20 +388,17 @@ export const Tooltip = React.memo(
             }
         };
 
-        useMountEffect(() => {
+        React.useEffect(() => {
             loadTargetEvents();
 
             if (visibleState && currentTargetRef.current && isDisabled(currentTargetRef.current)) {
                 hide();
             }
-        });
-
-        useUpdateEffect(() => {
-            loadTargetEvents();
 
             return () => {
                 unloadTargetEvents();
             };
+            // eslint-disable-next-line react-hooks/exhaustive-deps
         }, [show, hide, props.target]);
 
         useUpdateEffect(() => {