mirror of
https://github.com/desktop/desktop
synced 2024-10-30 06:03:10 +00:00
Merge pull request #16125 from desktop/sign-in-flow-kbd-focus
Focus on first suitable child in sign in flow
This commit is contained in:
commit
7551953c20
2 changed files with 17 additions and 1 deletions
|
@ -383,7 +383,7 @@ export class Dialog extends React.Component<IDialogProps, IDialogState> {
|
||||||
* 4. Any remaining button
|
* 4. Any remaining button
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
private focusFirstSuitableChild() {
|
public focusFirstSuitableChild() {
|
||||||
const dialog = this.dialogElement
|
const dialog = this.dialogElement
|
||||||
|
|
||||||
if (dialog === null) {
|
if (dialog === null) {
|
||||||
|
|
|
@ -41,6 +41,8 @@ const SignInWithBrowserTitle = __DARWIN__
|
||||||
const DefaultTitle = 'Sign in'
|
const DefaultTitle = 'Sign in'
|
||||||
|
|
||||||
export class SignIn extends React.Component<ISignInProps, ISignInState> {
|
export class SignIn extends React.Component<ISignInProps, ISignInState> {
|
||||||
|
private readonly dialogRef = React.createRef<Dialog>()
|
||||||
|
|
||||||
public constructor(props: ISignInProps) {
|
public constructor(props: ISignInProps) {
|
||||||
super(props)
|
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) {
|
public componentWillReceiveProps(nextProps: ISignInProps) {
|
||||||
if (nextProps.signInState !== this.props.signInState) {
|
if (nextProps.signInState !== this.props.signInState) {
|
||||||
if (
|
if (
|
||||||
|
@ -161,6 +175,7 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
|
||||||
<OkCancelButtonGroup
|
<OkCancelButtonGroup
|
||||||
okButtonText={primaryButtonText}
|
okButtonText={primaryButtonText}
|
||||||
okButtonDisabled={disableSubmit}
|
okButtonDisabled={disableSubmit}
|
||||||
|
onCancelButtonClick={this.onDismissed}
|
||||||
/>
|
/>
|
||||||
</DialogFooter>
|
</DialogFooter>
|
||||||
)
|
)
|
||||||
|
@ -324,6 +339,7 @@ export class SignIn extends React.Component<ISignInProps, ISignInState> {
|
||||||
onDismissed={this.onDismissed}
|
onDismissed={this.onDismissed}
|
||||||
onSubmit={this.onSubmit}
|
onSubmit={this.onSubmit}
|
||||||
loading={state.loading}
|
loading={state.loading}
|
||||||
|
ref={this.dialogRef}
|
||||||
>
|
>
|
||||||
{errors}
|
{errors}
|
||||||
{this.renderStep()}
|
{this.renderStep()}
|
||||||
|
|
Loading…
Reference in a new issue