Merge pull request #33926 from DylanDylann/fix/30195

Fix: No required field validation state picker

src/components/StatePicker/index.js

@@ -25,6 +25,9 @@ const propTypes = {
 
     /** Label to display on field */
     label: PropTypes.string,
+
+    /**  Callback to call when the picker modal is dismissed */
+    onBlur: PropTypes.func,
 };
 
 const defaultProps = {
@@ -33,9 +36,10 @@ const defaultProps = {
     errorText: '',
     onInputChange: () => {},
     label: undefined,
+    onBlur: () => {},
 };
 
-function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
+function StatePicker({value, errorText, onInputChange, forwardedRef, label, onBlur}) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [isPickerVisible, setIsPickerVisible] = useState(false);
@@ -45,15 +49,20 @@ function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
         setIsPickerVisible(true);
     };
 
-    const hidePickerModal = () => {
+    const hidePickerModal = (shouldBlur = true) => {
+        if (shouldBlur) {
+            onBlur();
+        }
         setIsPickerVisible(false);
     };
 
     const updateStateInput = (state) => {
         if (state.value !== value) {
             onInputChange(state.value);
         }
-        hidePickerModal();
+        // If the user selects any state, call the hidePickerModal function with shouldBlur = false
+        // to prevent the onBlur function from being called.
+        hidePickerModal(false);
     };
 
     const title = value && _.keys(COMMON_CONST.STATES).includes(value) ? translate(`allStates.${value}.stateName`) : '';