Skip to content

Address autofocus issue #7711 #7712

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+19 −6
Open

Address autofocus issue #7711 #7712

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b9ed70e
Address autofocus issue #7711
mapitman Dec 17, 2021
3011ff9
Remove semicolon
mapitman Feb 4, 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
2 changes: 1 addition & 1 deletion src/core/components/auth/api-key-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export default class ApiKeyAuth extends React.Component {
<label>Value:</label>
{
value ? <code> ****** </code>
: <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
: <Col><Input type="text" onChange={ this.onChange } /></Col>
}
</Row>
{
Expand Down
15 changes: 14 additions & 1 deletion src/core/components/auth/auths.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,17 @@ export default class Auths extends React.Component {
this.state = {}
}

componentDidMount() {
var inputs = document.getElementsByClassName("modal-ux-content")[0].getElementsByTagName("input")
Copy link
Contributor

@tim-lai tim-lai Feb 9, 2022

Choose a reason for hiding this comment

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

As a vanilla JS solution, this looks good to me. However, thinking about this more, we really should "React-ify" this to not directly change the DOM with the .focus. E.g. use "refs"

I'm thinking would could try adding a ref to className="auth-container" here that would contain multiple current refs. Most likely then also need to add creation of refs within the two maps that generate React element. e.g. something similar to ref={el => inputRef.current[x] = el} .

More info on refs here, and we'll want to be compatible with the possible future use of React hooks.

Copy link
Author

@mapitman mapitman Feb 10, 2022

Choose a reason for hiding this comment

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

"React-ifying" is the part where I'm out of my depth. I'll take a look at the link you provided and see if I can learn just enough to do this. 😸

for (let i = 0; i < inputs.length; i++) {
const element = inputs[i]
if (element) {
element.focus()
break
}
}
}

onAuthChange =(auth) => {
let { name } = auth

Expand Down Expand Up @@ -66,7 +77,9 @@ export default class Auths extends React.Component {
})

let nonOauthDefinitions = definitions.filter( schema => schema.get("type") !== "oauth2")
let oauthDefinitions = definitions.filter( schema => schema.get("type") === "oauth2")
let oauthDefinitions = definitions.filter(schema => schema.get("type") === "oauth2")



return (
<div className="auth-container">
Expand Down
2 changes: 1 addition & 1 deletion src/core/components/auth/basic-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ export default class BasicAuth extends React.Component {
<label>Username:</label>
{
username ? <code> { username } </code>
: <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
: <Col><Input type="text" required="required" name="username" onChange={ this.onChange } /></Col>
}
</Row>
<Row>
Expand Down
2 changes: 1 addition & 1 deletion src/core/components/auth/oauth2.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ export default class Oauth2 extends React.Component {
{
isAuthorized ? <code> { this.state.username } </code>
: <Col tablet={10} desktop={10}>
<input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange } autoFocus/>
<input id="oauth_username" type="text" data-name="username" onChange={ this.onInputChange } />
</Col>
}
</Row>
Expand Down
4 changes: 2 additions & 2 deletions src/core/plugins/oas3/components/http-auth.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export default class HttpAuth extends React.Component {
<label>Username:</label>
{
username ? <code> { username } </code>
: <Col><Input type="text" required="required" name="username" onChange={ this.onChange } autoFocus/></Col>
: <Col><Input type="text" required="required" name="username" onChange={ this.onChange } /></Col>
}
</Row>
<Row>
Expand Down Expand Up @@ -112,7 +112,7 @@ export default class HttpAuth extends React.Component {
<label>Value:</label>
{
value ? <code> ****** </code>
: <Col><Input type="text" onChange={ this.onChange } autoFocus/></Col>
: <Col><Input type="text" onChange={ this.onChange } /></Col>
}
</Row>
{
Expand Down