Skip to content

Focus on name field when mounting and update summary field UI #39050

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
nathanss merged 5 commits into from
Jul 11, 2023
Merged

Focus on name field when mounting and update summary field UI #39050

nathanss merged 5 commits into from
Jul 11, 2023

Conversation

@nathanss
Copy link
Contributor

@nathanss nathanss commented Jun 30, 2023 •
edited
Loading

Submission Review Guidelines:

Changes proposed in this Pull Request:

Focus on name field when mounting and update summary field UI

Closes #38204 .

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Enable the new product editor in WooCommerce > Settings > Advanced > Features.
  2. Go to Product > Add New.
  3. Verify that the name field is focused automatically.
  4. Check the appearance of the Summary field

Changelog entry

  • Automatically create a changelog entry from the details below.

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement

Message

Comment

Focus on name field when mounting and update summary field UI

@nathanss nathanss self-assigned this Jun 30, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jun 30, 2023 •
edited
Loading

Test Results Summary

Commit SHA: 5a724fc

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202611m 11s
E2E Tests1900018020816m 3s
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.

louwie17
louwie17 requested changes Jul 7, 2023
View reviewed changes
Copy link
Contributor

@louwie17 louwie17 left a comment

Choose a reason for hiding this comment

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

This tested well, but pushing it back as I don't think we should make it the default for the name block (as mentioned in the comment below), but instead make it a configuration option through attributes.

packages/js/product-editor/src/blocks/name/edit.tsx Outdated

useEffect( () => {
if ( inputRef.current ) {
inputRef.current.focus();
Copy link
Contributor

@louwie17 louwie17 Jul 7, 2023

Choose a reason for hiding this comment

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

I don't think this should be the default for the name block, as it could very well be used in other contexts where the auto focus wouldn't make sense.
I think we are better off adding this as an option through attributes. We may want a autoFocus attribute. You can see the radio block for examples on using additional attributes, and how to get the value within the component.

I would also suggest using the autoFocus prop for the inputControl instead of going the above route.

Copy link
Contributor Author

@nathanss nathanss Jul 10, 2023

Choose a reason for hiding this comment

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

Thanks for the suggestion. I didn't knew that there was an autoFocus prop since we don't have the type definitions :(

@nathanss nathanss requested a review from louwie17 July 10, 2023 13:30
@github-actions github-actions bot added focus: react admin [team:Ghidorah] plugin: woocommerce Issues related to the WooCommerce Core plugin. labels Jul 10, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Jul 10, 2023

Hi @louwie17,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@nathanss
Copy link
Contributor Author

nathanss commented Jul 10, 2023

@louwie17 I had to add a eslint ignore, apparently we have a rule to disallow using autoFocus. Is that fine, since that's the behavior we want in this case?

louwie17
louwie17 approved these changes Jul 10, 2023
View reviewed changes
Copy link
Contributor

@louwie17 louwie17 left a comment

Choose a reason for hiding this comment

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

Thanks for addressing the changes @nathanss, this still tested well! Nice work!

I had to add a eslint ignore, apparently we have a rule to disallow using autoFocus. Is that fine, since that's the behavior we want in this case?

I think this is fine given it's an option and we can easily disable it again by the user of the attribute if we want to.
I will cc: @jarekmorawski on this though, just incase there are similar rules for design within WooCommerce?

But I am good if we merge this as is.

@nathanss nathanss merged commit e85491b into trunk Jul 11, 2023
@nathanss nathanss deleted the tweak/generaltab branch July 11, 2023 12:48
@github-actions github-actions bot added this to the 8.0.0 milestone Jul 11, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@louwie17 louwie17 louwie17 approved these changes

Assignees

@nathanss nathanss

Labels

plugin: woocommerce Issues related to the WooCommerce Core plugin.

Projects

None yet

Milestone

8.0.0

Development

Successfully merging this pull request may close these issues.

[MVP QA #1] General tab: Product details

3 participants

@nathanss @louwie17