From 963aef185c6ca67b36a104ba2a80d58da2f3cf10 Mon Sep 17 00:00:00 2001
From: abdulbasithqb <abdul.basith@qburst.com>
Date: Thu, 14 Dec 2023 02:04:50 +0530
Subject: [PATCH] enhancement: add MaskedInput icon clickability

---
 src/js/components/MaskedInput/MaskedInput.js     | 16 +++++++++++++++-
 .../components/MaskedInput/StyledMaskedInput.js  |  3 ++-
 src/js/components/MaskedInput/index.d.ts         |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/js/components/MaskedInput/MaskedInput.js b/src/js/components/MaskedInput/MaskedInput.js
index e8657458aa..1c18d428a3 100644
--- a/src/js/components/MaskedInput/MaskedInput.js
+++ b/src/js/components/MaskedInput/MaskedInput.js
@@ -163,6 +163,7 @@ const MaskedInput = forwardRef(
       focus: focusProp,
       focusIndicator = true,
       icon,
+      maskIconClickable = false,
       id,
       mask = defaultMask,
       name,
@@ -372,7 +373,20 @@ const MaskedInput = forwardRef(
     return (
       <StyledMaskedInputContainer plain={plain}>
         {maskedInputIcon && (
-          <StyledIcon reverse={reverse} theme={theme}>
+          <StyledIcon
+            reverse={reverse}
+            theme={theme}
+            maskIconClickable={maskIconClickable}
+            onClick={
+              maskIconClickable
+                ? (event) => {
+                    setFocus(true);
+                    setShowDrop(true);
+                    if (onFocus) onFocus(event);
+                  }
+                : undefined
+            }
+          >
             {maskedInputIcon}
           </StyledIcon>
         )}
diff --git a/src/js/components/MaskedInput/StyledMaskedInput.js b/src/js/components/MaskedInput/StyledMaskedInput.js
index eee154969a..f35aa8b140 100644
--- a/src/js/components/MaskedInput/StyledMaskedInput.js
+++ b/src/js/components/MaskedInput/StyledMaskedInput.js
@@ -39,7 +39,8 @@ export const StyledIcon = styled.div`
   justify: center;
   top: 50%;
   transform: translateY(-50%);
-  pointer-events: none;
+  pointer-events: ${(props) => (props.maskIconClickable ? 'auto' : 'none')};
+  ${(props) => (props.maskIconClickable ? 'cursor: pointer;' : '')};
   ${(props) =>
     props.reverse
       ? `right: ${getInputPadBySide(props, 'right')};`
diff --git a/src/js/components/MaskedInput/index.d.ts b/src/js/components/MaskedInput/index.d.ts
index 581a49405f..37c7af3939 100644
--- a/src/js/components/MaskedInput/index.d.ts
+++ b/src/js/components/MaskedInput/index.d.ts
@@ -8,6 +8,7 @@ export interface MaskedInputProps {
   dropProps?: DropType;
   focusIndicator?: boolean;
   icon?: JSX.Element;
+  maskIconClickable?: boolean;
   id?: string;
   mask?: Array<{
     length?: number | number[];