Skip to content

form-token-field/TokenInput: Fix automatic focus on first render due to updating selected value from async stores #44347

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

Closed
alexstine wants to merge 11 commits into from
Closed

form-token-field/TokenInput: Fix automatic focus on first render due to updating selected value from async stores #44347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
7706fa2
Test commit, revert later.
alexstine Sep 21, 2022
819fe4d
Only focus the form token field if it is not on initial render.
alexstine Sep 22, 2022
5a36188
Revert "Test commit, revert later."
alexstine Sep 22, 2022
6177023
Merge branch 'trunk' into refactor/form-token-field-a11y
alexstine Sep 22, 2022
e1b450a
Clear up code.
alexstine Sep 28, 2022
885c304
Merge branch 'trunk' of github.com:wordpress/gutenberg into refactor/…
alexstine Sep 28, 2022
e67f319
Test commit, revert later.
alexstine Sep 28, 2022
1852c29
Remove the aria-label from the ComboboxControl and let value take over.
alexstine Sep 28, 2022
98e96e7
Get rid of useEffect and useState. I made it work based off input foc…
alexstine Sep 28, 2022
3f2aff7
Add fallback value for inputHasFocus special prop.
alexstine Sep 28, 2022
dab608d
Remove test.
alexstine Sep 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/components/src/combobox-control/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -247,11 +247,7 @@ function ComboboxControl( {
instanceId={ instanceId }
ref={ inputContainer }
value={ isExpanded ? inputValue : currentLabel }
aria-label={
Copy link
Contributor Author

@alexstine alexstine Sep 28, 2022

Choose a reason for hiding this comment

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

Should not need this any longer since value displays the currently selected option.

currentLabel
? `${ currentLabel }, ${ label }`
: null
Comment on lines -250 to -253
Copy link
Contributor

@ciampo ciampo Sep 23, 2022

Choose a reason for hiding this comment

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

Is it ok to remove this aria-label, given that we're already using BaseControl ?

CC'ing @tellthemachines since it looks like she introduced this change in #27431

Copy link
Contributor Author

@alexstine alexstine Sep 23, 2022

Choose a reason for hiding this comment

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

@ciampo If done right, there is no reason native HTML should not work for this control as suggested by @joedolson in the related issue. Sometimes ARIA complicates things and sometimes it has a really good use. I am not sure how this works for Mac yet as I have not tested it.

}
inputHasFocus={ inputHasFocus }
Copy link
Contributor Author

@alexstine alexstine Sep 28, 2022

Choose a reason for hiding this comment

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

Need to pass this so I know if input has focus or not.

onFocus={ onFocus }
onBlur={ onBlur }
isExpanded={ isExpanded }
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/form-token-field/token-input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export function UnForwardedTokenInput(
const {
value,
isExpanded,
inputHasFocus,
Copy link
Contributor Author

@alexstine alexstine Sep 28, 2022

Choose a reason for hiding this comment

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

Gives me the focus of the input field.

instanceId,
selectedSuggestionIndex,
className,
Expand All @@ -30,6 +31,9 @@ export function UnForwardedTokenInput(
} = props;

const size = value ? value.length + 1 : 0;
// Ensure this is set to true if inputHasFocus is not defined.
const checkInputHasFocus =
Copy link
Contributor Author

@alexstine alexstine Sep 28, 2022

Choose a reason for hiding this comment

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

It is not a given that this var will be used for this component. If it is not defined, still allow us to keep same functionality.

inputHasFocus !== undefined ? inputHasFocus : true;

const onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {
if ( onChange ) {
Expand Down Expand Up @@ -62,7 +66,7 @@ export function UnForwardedTokenInput(
: undefined
}
aria-activedescendant={
selectedSuggestionIndex !== -1
checkInputHasFocus && selectedSuggestionIndex !== -1
? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`
: undefined
}
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/form-token-field/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,7 @@ export interface TokenProps extends TokenItem {

export interface TokenInputProps {
isExpanded: boolean;
inputHasFocus?: boolean;
Copy link
Contributor Author

@alexstine alexstine Sep 28, 2022

Choose a reason for hiding this comment

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

I think it is okay to keep this as optional, I just need to add a fallback to handle this if the var does not exist.

instanceId: string | number;
selectedSuggestionIndex: number;
onChange?: ( { value }: { value: string } ) => void;
Expand Down