development/github-desktop
development/github-desktop
1
0
Fork 0
mirror of https://github.com/desktop/desktop synced 2024-10-30 06:03:10 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16125 from desktop/sign-in-flow-kbd-focus

Browse source 
Focus on first suitable child in sign in flow
This commit is contained in:
Markus Olsson 2023-02-14 12:57:05 +01:00 committed by GitHub
commit 7551953c20
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/src/ui/dialog/dialog.tsx
View file

@ -383,7 +383,7 @@ export class Dialog extends React.Component<IDialogProps, IDialogState> {
* 4. Any remaining button
*
*/
private focusFirstSuitableChild() {
public focusFirstSuitableChild() {
const dialog = this.dialogElement
if (dialog === null) {

16
app/src/ui/sign-in/sign-in.tsx
View file

@ -41,6 +41,8 @@ const SignInWithBrowserTitle = __DARWIN__
const DefaultTitle = 'Sign in'
export class SignIn extends React.Component<ISignInProps, ISignInState> {
private readonly dialogRef = React.createRef<Dialog>()
public constructor(props: ISignInProps) {
super(props)
@ -52,6 +54,18 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
}
}
public componentDidUpdate(prevProps: ISignInProps) {
// Whenever the sign in step changes we replace the dialog contents which
// means we need to re-focus the first suitable child element as it's
// essentially a "new" dialog we're showing only the dialog component itself
// doesn't know that.
if (prevProps.signInState !== null && this.props.signInState !== null) {
if (prevProps.signInState.kind !== this.props.signInState.kind) {
this.dialogRef.current?.focusFirstSuitableChild()
}
}
}
public componentWillReceiveProps(nextProps: ISignInProps) {
if (nextProps.signInState !== this.props.signInState) {
if (
@ -161,6 +175,7 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
<OkCancelButtonGroup
okButtonText={primaryButtonText}
okButtonDisabled={disableSubmit}
onCancelButtonClick={this.onDismissed}
/>
</DialogFooter>
)
@ -324,6 +339,7 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
onDismissed={this.onDismissed}
onSubmit={this.onSubmit}
loading={state.loading}
ref={this.dialogRef}
>
{errors}
{this.renderStep()}