-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[C+ Checklist Needs Completion] [$250] The focused background isn't updated when the selected option is updated from BE side #54089
Comments
Triggered auto assignment to @michaelkwardrop ( |
ProposalPlease re-state the problem that we are trying to solve in this issue.The focused background isn't updated when the selected option is updated from BE side What is the root cause of that problem?The focus is not updated when the selected priority mode changes, causing the UI to stay focused on the old selection. What changes do you think we should make in order to solve the problem?We should manage the focus using a state variable (
And change the
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?What alternative solutions did you explore? (Optional)POC New-Expensify.mp4 |
Edited by proposal-police: This proposal was edited at 2024-12-13 02:47:13 UTC. ProposalPlease re-state the problem that we are trying to solve in this issue.The focused background isn't updated when the selected option is updated from BE side What is the root cause of that problem?In BaseSelectionList, the
What changes do you think we should make in order to solve the problem?Out dated
In PreferencesPage, we should use a
We also need to export the App/src/components/SelectionList/BaseSelectionList.tsx Lines 735 to 741 in 10bfe9a
New proposal: In the BaseSelectionList add a new prop
What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?Edited at 2024-12-14 04:46:13 UTC. N/A What alternative solutions did you explore? (Optional)N/A |
Edited by proposal-police: This proposal was edited at 2024-12-19 16:20:50 UTC. ProposalPlease re-state the problem that we are trying to solve in this issue.The focused background isn't updated in the device 1 What is the root cause of that problem?In This Bug also appears on similar pages: Language and Theme settings. What changes do you think we should make in order to solve the problem?Add an
useEffect(() => {
const selectedItemIndex = flattenedSections.allOptions.findIndex((option) => option.isSelected);
if (selectedItemIndex === -1 || selectedItemIndex === focusedIndex) {
return;
}
setFocusedIndex(selectedItemIndex);
}, [flattenedSections]); What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?For this specific issue, we can introduce these test cases for
it('should handle item press correctly', () => {
render(<RenderBaseSelectionList sections={[{data: SECTIONS}]} />);
fireEvent.press(screen.getByTestId('base-list-item-2'));
expect(mockOnSelectRow).toHaveBeenCalledWith({
...SECTIONS.at(1),
shouldAnimateInHighlight: false,
});
});
it('should update focused item when sections are updated from BE', () => {
const updatedSections = SECTIONS.map((section) => ({
...section,
isSelected: section.keyForList === '2',
}));
const {rerender} = render(<RenderBaseSelectionList sections={[{data: SECTIONS}]} />);
fireEvent.press(screen.getByTestId('base-list-item-1'));
rerender(<RenderBaseSelectionList sections={[{data: updatedSections}]} />);
expect(screen.getByTestId('base-list-item-2')).toHaveAccessibilityValue({
selected: true,
});
});
it('should handle keyboard navigation correctly', async () => {
render(<RenderBaseSelectionList sections={[{data: SECTIONS}]} />);
await userEvent.keyboard('{arrowdown}');
expect(screen.getByTestId('base-list-item-2', {})).toHaveAccessibilityValue({
selected: true,
});
}); What alternative solutions did you explore? (Optional)We can pass |
hey contributors, please make sure that your proposal also fix this problem |
@michaelkwardrop Let me take over this bug because it came from https://expensify.slack.com/archives/C05LX9D6E07/p1733996291225739?thread_ts=1730403194.757359&cid=C05LX9D6E07 |
Updated proposal to fix this problem |
Job added to Upwork: https://www.upwork.com/jobs/~021867633562881780913 |
Current assignee @DylanDylann is eligible for the External assigner, not assigning anyone new. |
Make sure to add tests too |
Updated proposal to add automated tests |
@daledah Could you suggest an automated test for this one? @linhvovan29546 It seems your test doesn't match this issue |
@DylanDylann The root issue lies in the |
@linhvovan29546 Could you please detail your point maybe with some pseudo code? |
@DylanDylann Here are some details:
Demo codeconst ALTERNATE_TEXT = "Only show unread sorted alphabetically"
const MOCK_SECTIONS = [
{
"value": "gsd",
"text": "#focus",
"alternateText": ALTERNATE_TEXT,
"keyForList": "gsd",
"isSelected": true
},
{
"value": "default",
"text": "Most recent",
"alternateText": "Show all chats sorted by most recent",
"keyForList": "default",
"isSelected": false
}
]
jest.mock('@react-navigation/native', () => {
const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
return {
...actualNav,
useIsFocused: jest.fn(),
useFocusEffect: jest.fn()
};
});
describe('BaseSelectionList Component', () => {
const mockOnSelectRow = jest.fn();
const RenderBaseSelectionList = (props: BaseSelectionListProps = {}) => (
<BaseSelectionList
sections={[{ data: props.sections }]}
ListItem={RadioListItem}
onSelectRow={mockOnSelectRow}
shouldSingleExecuteRowSelect
initiallyFocusedOptionKey={props.sections.find((mode) => mode.isSelected)?.keyForList}
/>
)
afterEach(() => {
jest.clearAllMocks();
});
it('renders BaseSelectionList correctly', () => {
render(<RenderBaseSelectionList sections={MOCK_SECTIONS} />);
expect(screen.getByTestId('base-list-item-gsd')).toHaveAccessibilityState({
selected: true
})
});
it('handles item press correctly', async () => {
render(<RenderBaseSelectionList sections={MOCK_SECTIONS} />);
fireEvent.press(screen.getByTestId('base-list-item-default'));
expect(mockOnSelectRow).toHaveBeenCalledWith({
...MOCK_SECTIONS[1],
shouldAnimateInHighlight: false
})
});
it('updates focused Item when sections are updated from the background', async () => {
const updatedSections = MOCK_SECTIONS.map((section) => ({
...section,
isSelected: section.keyForList === 'default' ? true : false
}))
const { rerender, getByTestId } = render(<RenderBaseSelectionList sections={MOCK_SECTIONS} />);
expect(screen.getByTestId('base-list-item-gsd')).toHaveAccessibilityState({
selected: true
})
fireEvent.press(getByTestId('BaseListItem-gsd'));
rerender(<RenderBaseSelectionList sections={updatedSections} />)
await waitFor(() => expect(screen.getByTestId('base-list-item-default')).toHaveAccessibilityState({
selected: true,
}));
});
}); |
@daledah Any update from you? |
@DylanDylann i updated proposal |
Triggered auto assignment to @yuwenmemon, see https://stackoverflow.com/c/expensify/questions/7972 for more details. |
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results. If a regression has occurred and you are the assigned CM follow the instructions here. If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future. |
If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results. If a regression has occurred and you are the assigned CM follow the instructions here. If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future. |
|
The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.82-12 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue: If no regressions arise, payment will be issued on 2025-01-17. 🎊 For reference, here are some details about the assignees on this issue:
|
@DylanDylann @michaelkwardrop @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button] |
Hi @daledah and @DylanDylann, do you think you could take a look at this regression please which seems to come from this PR? |
@srikarparsi Yes it is a regression from our prev PR. @daledah Let's create a PR to fix it, I believe that the fix is small |
Payment summary: Contributor: @daledah $125 - paid via UpWork ✅ 50% regression penalty #54931 |
BugZero Checklist:
Bug classificationSource of bug:
Where bug was reported:
Who reported the bug:
Regression Test ProposalTest:
Do we agree 👍 or 👎 |
UPDATEPayment summary: Contributor: @daledah $125 - paid via UpWork ✅ 50% regression penalty #54931 |
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 9.0.75-6
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @DylanDylann
Slack conversation (hyperlinked to channel name): expensify_bugs
Action Performed:
Expected Result:
The selected option is updated in the device 1 but the focus background isn't updated
Actual Result:
The focused background isn't updated in the device 1
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
Add any screenshot/video evidence
Screen.Recording.2024-12-12.at.11.29.54.mov
Recording.844.mp4
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @michaelkwardropThe text was updated successfully, but these errors were encountered: