Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

Edited by proposal-police: This proposal was edited at 2024-12-25 18:59:32 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Bank account - App does not trigger required field validation when no state is selected

What is the root cause of that problem?

We run validate onBlur but we are not bluring on modal close here

What changes do you think we should make in order to solve the problem?

We can apply similar fix as we did in here by blurring on modal close

    onBlur,
}: PushRowWithModalProps) {
    const [isModalVisible, setIsModalVisible] = useState(false);

    const handleModalClose = () => {
        onBlur?.();
        setIsModalVisible(false);
    };

we can also add a new prop of shouldBlurOnModalClose to make it optional and only call the blurring if true so that we can use it specifically for places we want.
BTW we can apply the same fix for StatePicker, CountryPicker and also other similar components where needed

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Proposal

Please re-state the problem that we are trying to solve in this issue.

• App does not trigger required field validation when we focus / open state field and focus away.

What is the root cause of that problem?

• In the bank account flow, we utilize the AddressFormFields component. Within this component, both the state picker and country picker rely on the PushRowWithModal component.

• The PushRowWithModal was introduced in PR #51173. However, this implementation did not account for the bug we addressed in PR #33926. The root cause analysis (RCA) and corresponding solution for that issue are detailed here.

What changes do you think we should make in order to solve the problem?

• The general approach will align with PR #35926. Here's the detailed plan:

• Introduce a new ref:

const shouldBlurOnCloseRef = useRef(true);

Add this in PushRowWithModal.

• Update the modal close handler:

    const handleModalClose = () => {
        if (shouldBlurOnCloseRef.current) {
            onBlur?.(); // onBlur comes from PushRowWithModalProps
        }
        setIsModalVisible(false);
    };

• Modify the modal open handler:

Add the following line at line:

        shouldBlurOnCloseRef.current = false;

• Ensure backward compatibility:

Introduce a new flag parameter, such as shouldBlurInputOnCloseModal. Apply the above changes only when this flag is set to true. This will maintain backward compatibility for components relying on the existing behavior.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)