Skip to content

Conversation

britt6612
Copy link
Collaborator

What does this PR do?

This PR adds an option in the theme to remove the focusIndicator from Formfield.

Where should the reviewer start?

FormField.js

What testing has been done on this PR?

locally & wrote a test

test could use some work

How should this be manually tested?

locally

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

It's desirable to be able to set a flag in the theme to allow focus to be placed on the individual Checkbox/RadioButton/etc directly (following native browser behavior) rather than stealing it to place on formfield.

What are the relevant issues?

closes #7486

Screenshots (if appropriate)

Do the grommet docs need to be updated?

yes

Should this PR be mentioned in the release notes?

yes

Is this change backwards compatible or is it a breaking change?

backwards compatible

@britt6612 britt6612 requested review from taysea and jcfilben January 28, 2025 14:47
@britt6612 britt6612 marked this pull request as draft January 29, 2025 17:09
@britt6612 britt6612 marked this pull request as ready for review January 29, 2025 20:58
britt6612 and others added 5 commits January 29, 2025 17:48
Co-authored-by: Jessica Rosenquist <54560994+jcfilben@users.noreply.github.com>
Co-authored-by: Jessica Rosenquist <54560994+jcfilben@users.noreply.github.com>
return cloneElement(child, {
focusIndicator: modifiedFocusIndicator,
});
}
return cloneElement(child, {
plain: true,
focusIndicator: false,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Could the above "if (wantFocusIndicator) condition be removed and just change the existing return to be:

return cloneElement(child, {
              plain: true,
              focusIndicator: theme.formField?.focus?.containerFocus === true ? false : true,
...

Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
britt6612 and others added 6 commits January 30, 2025 13:56
Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
Co-authored-by: Taylor Seamans <taylor.seamans@yahoo.com>
@britt6612 britt6612 requested review from jcfilben and taysea January 30, 2025 22:09
Copy link
Collaborator

@taysea taysea left a comment

Choose a reason for hiding this comment

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

Behavior looks good. Thank you!

@jcfilben
Copy link
Collaborator

jcfilben commented Jan 31, 2025

I was just expecting the focus to change for these inputs

const grommetInputFocusNames = [
  'CheckBox',
  'CheckBoxGroup',
  'RadioButton',
  'RadioButtonGroup',
  'RangeInput',
  'RangeSelector',
  'StarRating',
  'ThumbsRating',
];

I didn't expect the focus to change for inputs outside of this list when focus.containerFocus = false
Here is the Select component
This PR:
Screenshot 2025-01-31 at 9 54 17 AM

Previously:
Screenshot 2025-01-31 at 9 55 11 AM

@britt6612
Copy link
Collaborator Author

I was just expecting the focus to change for these inputs

const grommetInputFocusNames = [
  'CheckBox',
  'CheckBoxGroup',
  'RadioButton',
  'RadioButtonGroup',
  'RangeInput',
  'RangeSelector',
  'StarRating',
  'ThumbsRating',
];

I didn't expect the focus to change for inputs outside of this list when focus.containerFocus = false Here is the Select component This PR: Screenshot 2025-01-31 at 9 54 17 AM

Previously: Screenshot 2025-01-31 at 9 55 11 AM

good catch @jcfilben fixed now!

@britt6612 britt6612 requested review from taysea and removed request for taysea January 31, 2025 17:31
Copy link
Collaborator

@jcfilben jcfilben 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!

@jcfilben jcfilben merged commit bed7b67 into grommet:master Jan 31, 2025
14 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

FormField -- theme should support ability for focus to go directly on input
3 participants