@razorpay/blade 6.0.4 → 6.0.5

package/build/components/index.web.js

@@ -17217,7 +17217,9 @@ var OTPInput = function OTPInput(_ref) {
       successText = _ref.successText,
       validationState = _ref.validationState,
       inputValue = _ref.value,
-      isMasked = _ref.isMasked;
+      isMasked = _ref.isMasked,
+      _ref$autoCompleteSugg = _ref.autoCompleteSuggestionType,
+      autoCompleteSuggestionType = _ref$autoCompleteSugg === void 0 ? 'oneTimeCode' : _ref$autoCompleteSugg;
   var inputRefs = [];
 
   var _useState = useState(otpToArray(inputValue)),
@@ -17225,6 +17227,11 @@ var OTPInput = function OTPInput(_ref) {
       otpValue = _useState2[0],
       setOtpValue = _useState2[1];
 
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputType = _useState4[0],
+      setInputType = _useState4[1];
+
   var isLabelLeftPositioned = labelPosition === 'left';
 
   var _useFormId = useFormId('otp'),
@@ -17252,6 +17259,28 @@ var OTPInput = function OTPInput(_ref) {
       });
     }
   }, [otpValue, otpLength, name, inputValue, onOTPFilled]);
+  useEffect(function () {
+    /* We want to disable the password managers for OTPInput when isMasked is set.
+       The issue with only setting autocomplete='off' is that its not an enforcement but a suggestion to the browser to follow.
+       This workaround unsets type on first render and sets it to `password` only once a value is entered by the user.
+    */
+    otpValue.forEach(function (otp, index) {
+      // Set inputType as 'password' only when a value is entered when isMasked is set
+      if (!isEmpty_1(otp) && !inputType[index] && isMasked) {
+        var newInputType = Array.from(inputType);
+        newInputType[index] = 'password';
+        setInputType(newInputType);
+      } // Cleanup the inputType array whenever the value is empty but inputType[index] is set
+
+
+      if (isEmpty_1(otp) && inputType[index]) {
+        var _newInputType = Array.from(inputType);
+
+        _newInputType[index] = undefined;
+        setInputType(_newInputType);
+      }
+    });
+  }, [otpValue, inputType, isMasked]);
   /**
    * Changes the value of the otp at a given index and updates the otpValue stored in state
    *
@@ -17395,7 +17424,15 @@ var OTPInput = function OTPInput(_ref) {
       var _otpValue$index, _Array$from$index;
 
       var currentValue = inputValue ? otpToArray(inputValue)[index] || '' : otpValue[index] || '';
-      var ref = /*#__PURE__*/React__default.createRef();
+      var ref = /*#__PURE__*/React__default.createRef(); // if an inputValue is passed (controlled) and isMasked is set, inputType will always be password
+
+      var currentInputType = void 0;
+
+      if (isMasked) {
+        // if inputValue is passed (controlled component) then the inputType will always be password
+        currentInputType = inputValue ? 'password' : inputType[index];
+      }
+
       inputRefs.push(ref);
       inputs.push( /*#__PURE__*/jsx(Box, {
         flex: 1,
@@ -17431,7 +17468,7 @@ var OTPInput = function OTPInput(_ref) {
           isDisabled: isDisabled,
           placeholder: (_Array$from$index = Array.from(placeholder !== null && placeholder !== void 0 ? placeholder : '')[index]) !== null && _Array$from$index !== void 0 ? _Array$from$index : '',
           isRequired: true,
-          autoCompleteSuggestionType: "oneTimeCode",
+          autoCompleteSuggestionType: autoCompleteSuggestionType,
           keyboardType: keyboardType,
           keyboardReturnKeyType: keyboardReturnKeyType,
           validationState: validationState,
@@ -17439,7 +17476,7 @@ var OTPInput = function OTPInput(_ref) {
           errorText: errorText,
           helpText: helpText,
           hideFormHint: true,
-          type: isMasked ? 'password' : undefined
+          type: currentInputType
         })
       }, "".concat(inputId, "-").concat(index)));
     };