ui-soxo-bootstrap-core 2.4.25-dev.46 → 2.4.25-dev.48

package/core/lib/elements/basic/country-phone-input/country-phone-input.js

@@ -6,79 +6,48 @@
  * Ensure to follow a minimal standard
  */
 import React, { useState, useEffect, useRef } from 'react';
-
 import PhoneInput from 'react-phone-input-2';
-
 import 'react-phone-input-2/lib/style.css';
-
-import PropTypes from "prop-types";
-
+import PropTypes from 'prop-types';
 import './phone-input.scss';
 
+export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur,className }) {
+  const inputRef = useRef();
+  const hasInitializedRef = useRef(false); // IMPORTANT
 
-export default function CountryPhoneInput({ value, onChange, disabled, disableCountryCode, required, defaultCountryCode, onBlur }) {
-
-  let inputRef = useRef();
-
-  const [phone, setPhone] = useState();
+  const [phone, setPhone] = useState('');
 
+  /**
+   * run ONLY ONCE when initial value has dial code
+   */
   useEffect(() => {
-    if (value && value.code && value.code.dialCode !== null) {
-      // To prepopulate phone number ,concat dialCode and phone number
+    if (
+      !hasInitializedRef.current &&
+      value?.code?.dialCode &&
+      value?.value
+    ) {
       setPhone(value.code.dialCode + value.value);
-
-      // In case of update , to identify the country code that is getting selected
-      // We are setting a timeout
-      setTimeout(() => {
-        // Using the reference , we get the internal state of the library component
-        let selectedCountry = null;
-
-        let selectedCode = null;
-
-        if (
-          inputRef.current &&
-          inputRef.current.state &&
-          inputRef.current.state.selectedCountry
-        ) {
-          selectedCountry = inputRef.current.state.selectedCountry;
-
-          // Once we get the selected country ,we format it to the form that is received for normal onChange
-          selectedCode = {
-            countryCode: selectedCountry.iso2,
-            dialCode: selectedCountry.dialCode,
-            name: selectedCountry.name,
-          };
-        }
-
-        // Below being the format expected , we trigger the onChange to manually update the form
-        let updatedValue = {
-          value: value.code.dialCode + value.value,
-          code: selectedCode,
-        };
-
-        onChange(updatedValue);
-      }, 0);
+      hasInitializedRef.current = true; // 👈 mark as done
     }
-  }, []);
+  }, [value]);
 
   /**
-   * To get value in parent component
-   * @param {*} value
+   * handle user input
    */
-  function handleInput(value, code) {
-    if (code.dialCode) {
-      value = value.substring(code.dialCode.length);
-    }
-    // To get country code with phone number in parent component
-    value = {
-      value,
+  function handleInput(inputValue, code) {
+    if (!code?.dialCode) return;
+
+    const phoneNumber = inputValue.slice(code.dialCode.length);
+
+    // remove autofill class when user edits field (if you use it)
+    onChange({
+      value: phoneNumber,
       code,
-    };
-    onChange(value);
+    });
   }
 
   return (
-    <div className="phone-input">
+    <div className={`phone-input ${className || ''}`}>
       <PhoneInput
         ref={inputRef}
         country={defaultCountryCode || 'in'}

package/core/lib/elements/basic/country-phone-input/phone-input.scss

@@ -12,6 +12,20 @@
     // }
   }
   
+  .autofilled-field {
+  .react-tel-input {
+    .form-control {
+      border-color: #fa8c16 !important; // AntD warning orange
+      background-color: #fff7e6;
+      box-shadow: none;
+    }
+
+    .flag-dropdown {
+      border-color: #fa8c16 !important;
+      background-color: #fff7e6;
+    }
+  }
+}
 //   /* For tablets and smaller screens (max-width: 1024px) */
 //   @media (max-width: 1024px) {
 //     .phone-input {

package/core/modules/steps/steps.js

@@ -241,39 +241,7 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
 
     return <Component {...step.config} {...props} step={step} params={urlParams} onStepComplete={() => setIsStepCompleted(true)} />;
   };
-  /**
-   * Keyboard Navigation
-   * - Enables left and right arrow keys for step navigation.
-   * - Prevents navigation beyond step boundaries.
-   * - Cleans up event listeners on unmount.
-   */
-  //   useEffect(() => {
-  //     const handleKeyDown = (event) => {
-  //       // Handle Left Arrow key press to go to the previous step
-  //       if (event.key === 'ArrowLeft') {
-  //         if (activeStep > 0) {
-  //           handlePrevious();
-  //         }
-  //       }
-  //       // Handle Right Arrow key press to go to the next step
-  //       else if (event.key === 'ArrowRight') {
-  //         if (activeStep < steps.length - 1) {
-  //           handleNext();
-  //         }
-  //       }
-  //     };
-
-  //     // externalWin?.addEventListener('keydown', handleKeyDown);
-  //     if (externalWin instanceof Window) {
-  //       console.log("********************************",externalWin.addEventListener)
-  //     externalWin.addEventListener('keydown', handleKeyDown);
-  //     }
 
-  //     // showExternalWindow.addEventListener('keydown', handleKeyDown);
-  // console.log("LLLLLLLLLLLLLL",window.addEventListener)
-  //     window.addEventListener('keydown', handleKeyDown);
-  //     return () => window.removeEventListener('keydown', handleKeyDown);
-  //   }, [activeStep, steps, handlePrevious, handleNext, externalWin]);
   useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === 'ArrowLeft' && activeStep > 0) {
@@ -355,7 +323,6 @@ export default function ProcessStepsPage({ match, CustomComponents = {}, ...prop
       <>
         <ExternalWindow
           onWindowReady={(win) => {
-            console.log('>>>>>>>>>>>>>>>>>>>>>', win.addEventListener);
             setExternalWin(win);
             win.focus();
           }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-soxo-bootstrap-core",
-  "version": "2.4.25-dev.46",
+  "version": "2.4.25-dev.48",
   "description": "All the Core Components for you to start",
   "keywords": [
     "all in one"