Fix #5905: Password icon classes and cursor:pointer (#5912)

primefaces · Feb 6, 2024 · 53c9072 · 53c9072
1 parent bc3853e
commit 53c9072
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 4 deletions.
diff --git a/components/lib/password/Password.js b/components/lib/password/Password.js
@@ -275,13 +275,32 @@ export const Password = React.memo(
         const createIcon = () => {
             let icon;
 
-            const hideIconProps = mergeProps(ptm('hideIcon'));
-            const showIconProps = mergeProps(ptm('showIcon'));
+            const hideIconProps = mergeProps(
+                {
+                    key: 'hideIcon',
+                    role: 'button',
+                    tabIndex: props.tabIndex,
+                    className: cx('hideIcon'),
+                    onClick: toggleMask
+                },
+                ptm('hideIcon')
+            );
+
+            const showIconProps = mergeProps(
+                {
+                    key: 'showIcon',
+                    role: 'button',
+                    tabIndex: props.tabIndex,
+                    className: cx('showIcon'),
+                    onClick: toggleMask
+                },
+                ptm('showIcon')
+            );
 
             if (unmaskedState) {
-                icon = props.hideIcon || <EyeSlashIcon {...hideIconProps} onClick={toggleMask} />;
+                icon = props.hideIcon || <EyeSlashIcon {...hideIconProps} />;
             } else {
-                icon = props.showIcon || <EyeIcon {...showIconProps} onClick={toggleMask} />;
+                icon = props.showIcon || <EyeIcon {...showIconProps} />;
             }
 
             const eyeIcon = IconUtils.getJSXIcon(icon, unmaskedState ? { ...hideIconProps } : { ...showIconProps }, { props });

diff --git a/components/lib/password/PasswordBase.js b/components/lib/password/PasswordBase.js
@@ -22,6 +22,8 @@ const classes = {
     meter: 'p-password-meter',
     meterLabel: ({ strength }) => classNames('p-password-strength', strength),
     info: ({ strength }) => classNames('p-password-info', strength),
+    showIcon: 'p-password-show-icon',
+    hideIcon: 'p-password-hide-icon',
     transition: 'p-connected-overlay'
 };
 
@@ -60,6 +62,12 @@ const styles = `
     .p-password-input::-ms-clear {
         display: none;
     }
+
+    .p-password .p-password-show-icon,
+    .p-password .p-password-hide-icon {
+        line-height: 1.5;
+        cursor: pointer;
+    }
 }
 `;