Skip to content

Commit 3654c8c

Browse files
author
Hernan Rojek Moriceau
committed
feat (ux): Implements #19 (Avoid triggering click event on key down, and set focus on search input after submit)
1 parent cefd7c7 commit 3654c8c

File tree

3 files changed

+85
-134
lines changed

3 files changed

+85
-134
lines changed

‎src/applications/qa/index.js

Lines changed: 29 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
*/
1818

1919
import PropTypes from "prop-types";
20-
import React, { useState } from "react";
20+
import React, { useState, useRef } from "react";
2121
import { useSelector, useDispatch } from "react-redux";
2222
import _ from "lodash";
2323

24-
import { Search, Button } from "@carbon/react";
24+
import { Search, Form, Button } from "@carbon/react";
2525

2626
import Collections from "../../components/collections";
2727
import Retrievers from "../../components/retrievers";
@@ -125,6 +125,8 @@ function QuestionAnswering({ application, showSettings }) {
125125
const readers = useSelector((state) => state.readers);
126126
const dispatch = useDispatch();
127127

128+
const searchRef = useRef(null);
129+
128130
return (
129131
<div className="application">
130132
<div className="application__body">
@@ -133,10 +135,32 @@ function QuestionAnswering({ application, showSettings }) {
133135
</div>
134136
<div className="application__content">
135137
<h4>What would you like to know?</h4>
136-
<div className="qa__input">
138+
<Form className="qa__input"
139+
onSubmit={evt => {
140+
evt.preventDefault();
141+
142+
// Step 1: Set processing to true
143+
setProcessing(true);
144+
145+
// Step 2: Trigger ask function
146+
ask(
147+
questionText,
148+
retrievers.selectedRetriever,
149+
selectedCollection,
150+
readers.selectedReader,
151+
setAnswers,
152+
setProcessing,
153+
setProcessed,
154+
dispatch
155+
);
156+
157+
searchRef.current.focus();
158+
}}
159+
>
137160
<div className="qa__input--box">
138161
<Search
139162
id="qa__question"
163+
ref={searchRef}
140164
labelText={questionText}
141165
placeholder={strings.PLACEHOLDER_QUESTION}
142166
disabled={
@@ -155,20 +179,6 @@ function QuestionAnswering({ application, showSettings }) {
155179
setProcessed(false);
156180
setQuestionText(event.target.value);
157181
}}
158-
onKeyDown={(event) => {
159-
if (event.key === "Enter") {
160-
ask(
161-
questionText,
162-
retrievers.selectedRetriever,
163-
selectedCollection,
164-
readers.selectedReader,
165-
setAnswers,
166-
setProcessing,
167-
setProcessed,
168-
dispatch
169-
);
170-
}
171-
}}
172182
onClick={() => {
173183
setShowSuggestedQuestions(true);
174184
}}
@@ -205,40 +215,8 @@ function QuestionAnswering({ application, showSettings }) {
205215
) : null}
206216
</div>
207217
<Button
208-
className="qa__question--submit-btn"
209218
kind="primary"
210-
onClick={() => {
211-
// Step 1: Set processing to true
212-
setProcessing(true);
213-
214-
// Step 2: Trigger ask function
215-
ask(
216-
questionText,
217-
retrievers.selectedRetriever,
218-
selectedCollection,
219-
readers.selectedReader,
220-
setAnswers,
221-
setProcessing,
222-
setProcessed,
223-
dispatch
224-
);
225-
}}
226-
onKeyDown={() => {
227-
// Step 1: Set processing to true
228-
setProcessing(true);
229-
230-
// Step 2: Trigger ask function
231-
ask(
232-
questionText,
233-
retrievers.selectedRetriever,
234-
selectedCollection,
235-
readers.selectedReader,
236-
setAnswers,
237-
setProcessing,
238-
setProcessed,
239-
dispatch
240-
);
241-
}}
219+
type="submit"
242220
disabled={
243221
disabled ||
244222
!retrievers.selectedRetriever ||
@@ -249,7 +227,7 @@ function QuestionAnswering({ application, showSettings }) {
249227
>
250228
Ask
251229
</Button>
252-
</div>
230+
</Form>
253231
{questionText !== strings.PLACEHOLDER_QUESTION ? (
254232
<div className="answers">
255233
{(processing || processed) && questionText ? (

‎src/applications/reading/index.js

Lines changed: 28 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@
1717
*/
1818

1919
import PropTypes from "prop-types";
20-
import React, { useState } from "react";
20+
import React, { useState, useRef } from "react";
2121
import { useSelector, useDispatch } from "react-redux";
2222
import _ from "lodash";
2323

24-
import { TextArea, TextInput, Button } from "@carbon/react";
24+
import { TextArea, TextInput, Form, Button } from "@carbon/react";
2525

2626
import Readers from "../../components/readers";
2727
import Answers from "../../components/answers";
@@ -117,6 +117,8 @@ function Reading({ application, showSettings }) {
117117
const readers = useSelector((state) => state.readers);
118118
const dispatch = useDispatch();
119119

120+
const questionRef = useRef(null);
121+
120122
return (
121123
<div className="application">
122124
<div className="application__body">
@@ -137,9 +139,30 @@ function Reading({ application, showSettings }) {
137139
setContext(event.target.value);
138140
}}
139141
></TextArea>
140-
<div className="reading__input--box">
142+
<Form className="reading__input--box"
143+
onSubmit={evt => {
144+
evt.preventDefault();
145+
146+
// Step 1: Set processing to true
147+
setProcessing(true);
148+
149+
// Step 2: Trigger read function
150+
read(
151+
questionText,
152+
context,
153+
readers.selectedReader,
154+
setAnswers,
155+
setProcessing,
156+
setProcessed,
157+
dispatch
158+
);
159+
160+
questionRef.current.focus();
161+
}}
162+
>
141163
<TextInput
142164
id="reading__question"
165+
ref={questionRef}
143166
labelText={"Question"}
144167
placeholder={strings.PLACEHOLDER_QUESTION}
145168
disabled={disabled || !context || !readers.selectedReader}
@@ -152,53 +175,10 @@ function Reading({ application, showSettings }) {
152175
setProcessed(false);
153176
setQuestionText(event.target.value);
154177
}}
155-
onKeyDown={(event) => {
156-
if (event.key === "Enter") {
157-
read(
158-
questionText,
159-
context,
160-
readers.selectedReader,
161-
setAnswers,
162-
setProcessing,
163-
setProcessed,
164-
dispatch
165-
);
166-
}
167-
}}
168178
></TextInput>
169179
<Button
170-
className="reading__question--submit-btn"
171180
kind="primary"
172-
onClick={() => {
173-
// Step 1: Set processing to true
174-
setProcessing(true);
175-
176-
// Step 2: Trigger ask function
177-
read(
178-
questionText,
179-
context,
180-
readers.selectedReader,
181-
setAnswers,
182-
setProcessing,
183-
setProcessed,
184-
dispatch
185-
);
186-
}}
187-
onKeyDown={() => {
188-
// Step 1: Set processing to true
189-
setProcessing(true);
190-
191-
// Step 2: Trigger ask function
192-
read(
193-
questionText,
194-
context,
195-
readers.selectedReader,
196-
setAnswers,
197-
setProcessing,
198-
setProcessed,
199-
dispatch
200-
);
201-
}}
181+
type="submit"
202182
disabled={
203183
disabled ||
204184
!context ||
@@ -208,7 +188,7 @@ function Reading({ application, showSettings }) {
208188
>
209189
Ask
210190
</Button>
211-
</div>
191+
</Form>
212192
</div>
213193
{questionText !== strings.PLACEHOLDER_QUESTION ? (
214194
<div className="answers">

‎src/applications/retrieval/index.js

Lines changed: 28 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@
1717
*/
1818

1919
import PropTypes from "prop-types";
20-
import React, { useState } from "react";
20+
import React, { useState, useRef } from "react";
2121
import { useSelector, useDispatch } from "react-redux";
2222

23-
import { Search, Button } from "@carbon/react";
23+
import { Search, Form, Button } from "@carbon/react";
2424

2525
import Collections from "../../components/collections";
2626
import Retrievers from "../../components/retrievers";
@@ -103,6 +103,8 @@ function Retrieval({ application, showSettings }) {
103103
const retrievers = useSelector((state) => state.retrievers);
104104
const dispatch = useDispatch();
105105

106+
const searchRef = useRef(null);
107+
106108
return (
107109
<div className="application">
108110
<div className="application__body">
@@ -111,10 +113,31 @@ function Retrieval({ application, showSettings }) {
111113
</div>
112114
<div className="application__content">
113115
<h4>What would you like to know?</h4>
114-
<div className="qa__input">
116+
<Form className="qa__input"
117+
onSubmit={evt => {
118+
evt.preventDefault();
119+
120+
// Step 1: Set processing to true
121+
setProcessing(true);
122+
123+
// Step 2: Trigger ask function
124+
ask(
125+
questionText,
126+
retrievers.selectedRetriever,
127+
selectedCollection,
128+
setDocuments,
129+
setProcessing,
130+
setProcessed,
131+
dispatch
132+
);
133+
134+
searchRef.current.focus();
135+
}}
136+
>
115137
<div className="qa__input--box">
116138
<Search
117139
id="qa__question"
140+
ref={searchRef}
118141
labelText={questionText}
119142
placeholder={strings.PLACEHOLDER_QUESTION}
120143
disabled={
@@ -181,38 +204,8 @@ function Retrieval({ application, showSettings }) {
181204
) : null}
182205
</div>
183206
<Button
184-
className="qa__question--submit-btn"
185207
kind="primary"
186-
onClick={() => {
187-
// Step 1: Set processing to true
188-
setProcessing(true);
189-
190-
// Step 2: Trigger ask function
191-
ask(
192-
questionText,
193-
retrievers.selectedRetriever,
194-
selectedCollection,
195-
setDocuments,
196-
setProcessing,
197-
setProcessed,
198-
dispatch
199-
);
200-
}}
201-
onKeyDown={() => {
202-
// Step 1: Set processing to true
203-
setProcessing(true);
204-
205-
// Step 2: Trigger ask function
206-
ask(
207-
questionText,
208-
retrievers.selectedRetriever,
209-
selectedCollection,
210-
setDocuments,
211-
setProcessing,
212-
setProcessed,
213-
dispatch
214-
);
215-
}}
208+
type="submit"
216209
disabled={
217210
disabled ||
218211
!retrievers.selectedRetriever ||
@@ -222,7 +215,7 @@ function Retrieval({ application, showSettings }) {
222215
>
223216
Ask
224217
</Button>
225-
</div>
218+
</Form>
226219
{questionText !== strings.PLACEHOLDER_QUESTION ? (
227220
<div className="documents">
228221
{(processing || processed) && questionText ? (

0 commit comments

Comments
 (0)