From 26431c68dc3513a8e66549e54fbc8589a5b8dca1 Mon Sep 17 00:00:00 2001
From: Brian Peiris <brianpeiris@gmail.com>
Date: Sat, 21 Apr 2018 00:57:05 -0700
Subject: [PATCH] set button types to fix submit-on-enter. also specify tab
indicies
---
src/react-components/hub-create-panel.js | 21 +++++++++++----------
1 file changed, 11 insertions(+), 10 deletions(-)
diff --git a/src/react-components/hub-create-panel.js b/src/react-components/hub-create-panel.js
index 6e689653b..5ef013277 100644
--- a/src/react-components/hub-create-panel.js
+++ b/src/react-components/hub-create-panel.js
@@ -72,13 +72,11 @@ class HubCreatePanel extends Component {
}));
};
- setToNextEnvironment = e => {
- e.preventDefault();
+ setToNextEnvironment = () => {
this.setToEnvironmentOffset(1);
};
- setToPreviousEnvironment = e => {
- e.preventDefault();
+ setToPreviousEnvironment = () => {
this.setToEnvironmentOffset(-1);
};
@@ -120,9 +118,7 @@ class HubCreatePanel extends Component {
<div className="create-panel__form">
<div
className="create-panel__form__left-container"
- onClick={e => {
- e.preventDefault();
-
+ onClick={() => {
if (this.state.expanded) {
this.shuffle();
} else {
@@ -130,7 +126,7 @@ class HubCreatePanel extends Component {
}
}}
>
- <button className="create-panel__form__rotate-button">
+ <button type="button" tabIndex="3" className="create-panel__form__rotate-button">
{this.state.expanded ? (
<img src="../assets/images/dice_icon.svg" />
) : (
@@ -138,8 +134,8 @@ class HubCreatePanel extends Component {
)}
</button>
</div>
- <div className="create-panel__form__right-container" onClick={this.createHub}>
- <button className="create-panel__form__submit-button">
+ <div className="create-panel__form__right-container">
+ <button type="submit" tabIndex="5" className="create-panel__form__submit-button">
{this.isHubNameValid() ? (
<img src="../assets/images/hub_create_button_enabled.svg" />
) : (
@@ -184,6 +180,8 @@ class HubCreatePanel extends Component {
<div className="create-panel__form__environment__picker__controls">
<button
className="create-panel__form__environment__picker__controls__prev"
+ type="button"
+ tabIndex="1"
onClick={this.setToPreviousEnvironment}
>
<FontAwesomeIcon icon={faAngleLeft} />
@@ -191,6 +189,8 @@ class HubCreatePanel extends Component {
<button
className="create-panel__form__environment__picker__controls__next"
+ type="button"
+ tabIndex="2"
onClick={this.setToNextEnvironment}
>
<FontAwesomeIcon icon={faAngleRight} />
@@ -200,6 +200,7 @@ class HubCreatePanel extends Component {
</div>
)}
<input
+ tabIndex="4"
className={formNameClassNames}
value={this.state.name}
onChange={e => this.setState({ name: e.target.value })}
--
GitLab