Distance - Amount is not disabled when it is non-interactive on distance confirmation page.

[Krishna2323]

Proposal

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

Distance - Amount is not disabled when it is non-interactive on distance confirmation page.

What is the root cause of that problem?

We are not disabling MenuItemWithTopDescription for amount when it is a distance request but we are properly handling it to show/hide right arrow icon.

https://github.com/Expensify/App/blob/5c138163049ef0f036d46c4359c51fcde673066f/src/components/MoneyRequestConfirmationList.js#L420-L428

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

Option 1

We can just add props.isDistanceRequest in disabled prop and it will solve the issue and if we don't want to grey out the distance item then we can also pass false to prop shouldGreyOutWhenDisabled.

Option 2

If we don't want the disabled cursor then we can just add propinteractive={!props.isDistanceRequest} or we can remove the disabled prop & just add propinteractive={!didConfirm && !props.isReadOnly && !props.isDistanceRequest}.

[Krishna2323]

Proposal

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

Distance - Amount is not disabled when it is non-interactive on distance confirmation page.

What is the root cause of that problem?

We are not disabling MenuItemWithTopDescription for amount when it is a distance request but we are properly handling it to show/hide right arrow icon.

https://github.com/Expensify/App/blob/5c138163049ef0f036d46c4359c51fcde673066f/src/components/MoneyRequestConfirmationList.js#L420-L428

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

Option 1

We can just add props.isDistanceRequest in disabled prop and it will solve the issue and if we don't want to grey out the distance item then we can also pass false to prop shouldGreyOutWhenDisabled.

Option 2

If we don't want the disabled cursor then we can just add propinteractive={!props.isDistanceRequest} or we can remove the disabled prop & just add propinteractive={!didConfirm && !props.isReadOnly && !props.isDistanceRequest}.

Result

[Krishna2323]

Proposal

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

Composer is highlighted instead of Edit Composer

What is the root cause of that problem?

When the menu actions of the composer is closed, we call restoreKeyboardState which focuses on the composer. Now when the menu actions is open and we click on edit icon on any message the focus is set to the edit message composer and menu actions gets closed and sets focus again to the composer.

https://github.com/Expensify/App/blob/1bdc5acc12f982b4f6e37bfadf9060ac3d2d3b3c/src/pages/home/report/ReportActionCompose/ReportActionCompose.js#L185-L191

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

We can check the id of the current active element and if it is the messageEditInput we will not focus on the composer.

    const restoreKeyboardState = useCallback(() => {
        if (!isKeyboardVisibleWhenShowingModalRef.current) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            if (document.activeElement.id === messageEditInput) return;
            focus();
        });
        isKeyboardVisibleWhenShowingModalRef.current = false;
    }, []);

[Krishna2323]

Proposal

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

Composer is highlighted instead of Edit Composer

What is the root cause of that problem?

When the menu actions of the composer is closed, we call restoreKeyboardState which focuses on the composer. Now when the menu actions is open and we click on edit icon on any message the focus is set to the edit message composer and menu actions gets closed and sets focus again to the composer.

https://github.com/Expensify/App/blob/1bdc5acc12f982b4f6e37bfadf9060ac3d2d3b3c/src/pages/home/report/ReportActionCompose/ReportActionCompose.js#L185-L191

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

We can check the id of the current active element and if it is the messageEditInput we will not focus on the composer.

    const restoreKeyboardState = useCallback(() => {
        if (!isKeyboardVisibleWhenShowingModalRef.current) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            if (document.activeElement.id === messageEditInput) return;
            focus();
        });
        isKeyboardVisibleWhenShowingModalRef.current = false;
    }, []);

[Krishna2323]

Proposal

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

Composer is highlighted instead of Edit Composer

What is the root cause of that problem?

When the menu actions of the composer is closed, we call restoreKeyboardState which focuses on the composer. Now when the menu actions is open and we click on edit icon on any message the focus is set to the edit message composer and menu actions gets closed and sets focus again to the composer.

https://github.com/Expensify/App/blob/1bdc5acc12f982b4f6e37bfadf9060ac3d2d3b3c/src/pages/home/report/ReportActionCompose/ReportActionCompose.js#L185-L191

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

We can check the id of the current active element and if it is the messageEditInput we will not focus on the composer.

    const restoreKeyboardState = useCallback(() => {
        if (!isKeyboardVisibleWhenShowingModalRef.current) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            if (document.activeElement.id === messageEditInput) return;
            focus();
        });
        isKeyboardVisibleWhenShowingModalRef.current = false;
    }, []);

[Krishna2323]

Proposal

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

Composer is highlighted instead of Edit Composer

What is the root cause of that problem?

When the menu actions of the composer is closed, we call restoreKeyboardState which focuses on the composer. Now when the menu actions is open and we click on edit icon on any message the focus is set to the edit message composer and menu actions gets closed and sets focus again to the composer.

https://github.com/Expensify/App/blob/1bdc5acc12f982b4f6e37bfadf9060ac3d2d3b3c/src/pages/home/report/ReportActionCompose/ReportActionCompose.js#L185-L191

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

We can check the id of the current active element and if it is the messageEditInput we will not focus on the composer.

    const restoreKeyboardState = useCallback(() => {
        if (!isKeyboardVisibleWhenShowingModalRef.current) {
            return;
        }
        InteractionManager.runAfterInteractions(() => {
            if (document.activeElement.id === messageEditInput) return;
            focus();
        });
        isKeyboardVisibleWhenShowingModalRef.current = false;
    }, []);

[Krishna2323]

GET IT RIGHT.

[Krishna2323]

YESS!!!

[Krishna2323]

YESS!!!

[Krishna2323]

AJKSBAKJSdbKSJDBASDK

[Krishna2323]

HIIIII