Composer is highlighted instead of Edit Composer

[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]

YESS!!!

[Krishna2323]

AJKSBAKJSdbKSJDBASDK

[Krishna2323]

HIIIII