Skip to content

Add/35173 category field improvements #35606

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.

Sign up for GitHub

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

Jump to bottom
Merged
mdperez86 merged 5 commits into from
Nov 17, 2022
Merged

Add/35173 category field improvements #35606

mdperez86 merged 5 commits into from
Nov 17, 2022

Conversation

@mdperez86
Copy link
Contributor

@mdperez86 mdperez86 commented Nov 16, 2022

All Submissions:

Changes proposed in this Pull Request:

  • Add new experimental prop to the select control to externalize the functionality of open the dropdown menu when clicking the select control.
  • Use the prev prop in the category field to open the menu when click the input field.

Closes #35173

  • This PR is a very minor change/addition and does not require testing instructions (if checked you can ignore/remove the next section).

How to test the changes in this Pull Request:

  1. Go the Add New (MVP) product page
  2. Click on Categories field
  3. A dropdown menu with the category list should be shown

Screen.Recording.2022-11-16.at.5.27.46.PM.mov

Other information:

  • Have you added an explanation of what your changes do and why you'd like us to include them?
  • Have you written new tests for your changes, as applicable?
  • Have you created a changelog file for each project being changed, ie pnpm --filter=<project> changelog add?

FOR PR REVIEWER ONLY:

  • I have reviewed that everything is sanitized/escaped appropriately for any SQL or XSS injection possibilities. I made sure Linting is not ignored or disabled.

@mdperez86 mdperez86 self-assigned this Nov 16, 2022
@mdperez86 mdperez86 requested review from joshuatf and louwie17 and removed request for joshuatf November 16, 2022 20:30
@github-actions github-actions bot added focus: react admin package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Nov 16, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Nov 16, 2022 •
edited
Loading

Test Results Summary

Commit SHA: 7ac3fde

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests26000202620m 52s
E2E Tests186006019216m 8s
To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

joshuatf
joshuatf previously approved these changes Nov 17, 2022
View reviewed changes
Copy link
Contributor

@joshuatf joshuatf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice workaround and awesome job finding the downshift updates!

This is testing well for me. Left one possible addition, but pre-approving ✅

packages/js/components/src/experimental-select-control/select-control.tsx
className?: string;
disabled?: boolean;
/**
* This is a feature already implemented in [email protected] through the
Copy link
Contributor

@joshuatf joshuatf Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this comment 💯

plugins/woocommerce-admin/client/products/fields/category-field/category-field.tsx
>
<>
{ isOpen && isSearching && items.length === 0 && (
{ isSearching ? (
Copy link
Contributor

@joshuatf joshuatf Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@louwie17 You had a similar logic change in a recent PR IIRC. Just want to ping you to make sure there aren't any conflicts.

Copy link
Contributor

@louwie17 louwie17 Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do believe this logic update is fine and shouldn't cause any conflicts

packages/js/components/src/experimental-select-control/select-control.tsx Outdated
onFocus( { inputValue } );
},
onBlur: () => setIsFocused( false ),
onClick: () => __experimentalOpenMenuOnClick && openMenu(),
Copy link
Contributor

@joshuatf joshuatf Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

One quirk is that when we click around the combobox area that's not the input (e.g., click on the magnifying glass icon) it does not open the menu.

Should we add this logic __experimentalOpenMenuOnClick && openMenu() here as well?

woocommerce/packages/js/components/src/experimental-select-control/combo-box.tsx

Lines 32 to 35 in e924344

if ( document.activeElement !== inputRef.current ) {
inputRef.current.focus();
event.stopPropagation();
}

@mdperez86 mdperez86 requested a review from joshuatf November 17, 2022 14:22
joshuatf
joshuatf previously approved these changes Nov 17, 2022
View reviewed changes
Copy link
Contributor

@joshuatf joshuatf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good with focus now! That also solved the combobox click issue mentioned above.

There are some failing tests, but I think unrelated to this PR. I restarted them to try and fix. Otherwise this LGTM 🚢

@mdperez86 mdperez86 requested a review from joshuatf November 17, 2022 18:00
joshuatf
joshuatf approved these changes Nov 17, 2022
View reviewed changes
Copy link
Contributor

@joshuatf joshuatf left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM :shipit:

@mdperez86 mdperez86 merged commit fc56dcf into trunk Nov 17, 2022
@mdperez86 mdperez86 deleted the add/35173-category-field-improvements branch November 17, 2022 18:04
@github-actions github-actions bot added this to the 7.3.0 milestone Nov 17, 2022
@joshuatf joshuatf mentioned this pull request Nov 23, 2022
Open
4 tasks
@github-actions github-actions bot mentioned this pull request Jan 13, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@louwie17 louwie17 Awaiting requested review from louwie17

@mattsherman mattsherman Awaiting requested review from mattsherman

@octaedro octaedro Awaiting requested review from octaedro

1 more reviewer

@joshuatf joshuatf joshuatf approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

@mdperez86 mdperez86

Labels

package: @woocommerce/components issues related to @woocommerce/components plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

7.3.0

Development

Successfully merging this pull request may close these issues.

Category management improvements

4 participants

@mdperez86 @louwie17 @joshuatf