Resolved issue_Category - Parent category is disabled when selected#85448
Resolved issue_Category - Parent category is disabled when selected#85448ijmalik wants to merge 11 commits intoExpensify:mainfrom
Conversation
|
@youssef-lr Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button] |
| @@ -65,7 +65,10 @@ function getCategoryOptionTree(options: Record<string, Category> | Category[], i | |||
| const isChild = array.length - 1 === index; | |||
| const searchText = array.slice(0, index + 1).join(CONST.PARENT_CHILD_SEPARATOR); | |||
| const selectedParentOption = !isChild && Object.values(selectedOptions).find((op) => op.name === searchText); | |||
| const isParentOptionDisabled = !selectedParentOption || !selectedParentOption.enabled || selectedParentOption.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; | |||
| const optionParent = !isChild && Object.values(options).find((op) => op.name === searchText); | |||
There was a problem hiding this comment.
I'm a bit confused
We reverted the original PR
But where are the changes from the original PR?
Could you open a PR with the main changes from the reverted PR + with all regression fixes?
|
@ZhenjaHorbach #85359 is resolved, working on others. |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@ijmalik |
|
Hi @ZhenjaHorbach, Thanks for checking! Here's the status of each issue: ✅ Resolved & Pushed
⏳ Waiting on Design Decision
🚫 Not Related to This PR
WIP
I've updated the PR description with links to these issues and added test cases for the resolved ones. Let me know if you need anything else! |
#85361 (comment) – Confirmed same behavior as OldDot, awaiting final product/design decision I think we can leave the same behaviour as in OD |
|
Observation: Precondition: Expected Behavior: Actual Result: Note: Only the circular radio button is selectable; clicking anywhere else on the row (including the category name) does nothing. Could you please help direct this issue to the appropriate person or PR author? It seems to have been introduced elsewhere. Thanks! cat-select-able.webm |
|
Oh |
|
Created a bug for this issue |
If you see any further potential edge cases I might have missed, Please let me know and I’ll address them promptly. The PR description has been updated with links to the issue and testing steps. Let me know if anything else is needed. Thanks |
|
Lint and jest issues |
|
@ZhenjaHorbach I'm working on resolving the lint and Jest issues – will push an update shortly. |
0254fd4 to
5b1c6e1
Compare
|
@ZhenjaHorbach The lint and Jest issues have been resolved. |
|
I will recheck today! |
|
bump @ZhenjaHorbach |
|
I will check today! |
|
Awesome, thanks! We can check out a fresh build once that's pushed. 👍 |
@ZhenjaHorbach You can see the test steps for this case in the PR description under the “Tests” section:
The code change is included in the last push. Please let me know if any further adjustments are needed. |
|
Regarding #85361 – categories starting with a colon (e.g., We believe this change enhances the user experience by displaying categories in a logical, hierarchy‑free way when there is no actual parent. If you prefer to strictly match OldDot’s indentation, we can adjust, but we recommend keeping the more intuitive approach. Let us know your preference. |
|
Summary of Covered Cases
Result: Implemented via processCategoryNameSegments and getCategoryOptionTree – all sections (All, Recent, Selected, Search) now show hierarchical indentation.
I have tested all the above cases thoroughly, including the edge cases reported in the linked issues. However, there may be other unusual category names or scenarios not yet considered. If you notice any missing edge cases, please let me know, and I’ll handle them promptly to ensure no regressions reach staging. |
MultiLevelCategory-2.webm |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppAndroid: mWeb ChromeiOS: HybridAppiOS: mWeb SafariMacOS: Chrome / Safari |
@trjExpensify At the moment, we have updated only the expense details screen
But we have a lot of places where we use a category with parent categories
|
|
Yeah, I think everywhere apart from a category selector would be the consistent approach. |
|
@ijmalik |
@ZhenjaHorbach I've started working on it. Yes, I'll use a common function for category names to ensure consistency across all places. |
|
Should we also apply the leaf‑only category name in the Change Log and Thread Header? |
@ZhenjaHorbach, I recommend not applying the leaf‑only change to the Change Log and Thread Header. Keeping the full category path (e.g., Main1:Sub1:Leaf1) in those places is safer because different parents can have identically named leaves (e.g., Main:Sub1:Leaf vs Main:Sub2:Leaf). The full path disambiguates them. |
…logs & thread headers)
|
All cases listed in the above comment have been addressed, and the changes are available in this commit. Please review and let me know if any additional scenarios need handling. |
82068-MultiLevelCategories-new.mp4 |
I don't mind leaving these places unchanged CC: @trjExpensify |
|












Explanation of Change
Fixed Issues
$#85359, #85364,#85357,#82068
PROPOSAL:
Tests
Test Case 1: Category - Parent category is disabled when selected#85359
Precondition:Create both categories - Car and Car: Tesla
1.Go to workspace chat.
2.Create an expense with Tesla subcategory.
3.Open the expense.
4.Click Category.
5.On the search field, type Car.
6.Car will be enabled because Car is a valid category (there are Car and Car: Tesla categories).
Test Case 2: Search keeps parent and subcategories together#85364
Precondition:
Create both categories - D and D:E:F
1.Go to staging.new.expensify.com
2.Go to workspace chat.
3.Click + > Create expense > Manual.
4.Enter amount > Next.
5.Click Category.
6.Select D.
7.Click Category.
On the search field, type D.
Verify that Parent category (D) and subcategories (E and F) will be arranged together.
Test Case 3: Category - Category appears as disabled when the category is A: B: #85357
Precondition:
Create this category - A: B:
1.Go to staging.new.expensify.com
2.Go to workspace chat.
3.Click + > Create expense > Manual.
4.Enter amount > Next.
5.Click Category.
6.Expected Result:
Verify that B: will be enabled.
Test Case 4: Category starting with a colon #85361
Precondition: Create a category named :D in the workspace.
1.Go to staging.new.expensify.com
2.Go to workspace chat.
3.Click + → Create expense → Manual.
4.Enter amount → Next.
5.Click Category.
6.Expected Result:
The category :D appears as a top‑level item with no indentation (i.e., not shown as a subcategory).
Test Case 5: Selected field shows only leaf category
Precondition: Workspace has a category Parent:Child.
1.Go to workspace chat.
2.Create an expense and select the category Parent:Child.
3.After selection, observe the field that displays the chosen category (e.g., in the expense form).
4.Expected Result:
Only the leaf name Child is displayed, not the full path Parent:Child.
Offline tests
Same as Tests
QA Steps
Same as Tests
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)src/languages/*files and using the translation methodSTYLE.md) were followedAvatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.ScrollViewcomponent to make it scrollable when more elements are added to the page.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari