mirror of
https://github.com/desktop/desktop
synced 2024-08-28 20:51:16 +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
|
@ -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) {
|
||||
|
|
|
@ -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()}
|
||||
|
|
Loading…
Reference in a new issue