Skip to content

Commit eda286a

Browse files
hrojekhrojek
authored
Merge pull request #21 from primeqa/focus-after-submit-2
Avoid triggering click event on key down, and set focus on search input after submit
2 parents fb3596c + bb8f614 commit eda286a

File tree

3 files changed

+91
-134
lines changed

3 files changed

+91
-134
lines changed

‎src/applications/qa/index.js

Lines changed: 31 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,9 @@ function QuestionAnswering({ application, showSettings }) {
125125
const readers = useSelector((state) => state.readers);
126126
const dispatch = useDispatch();
127127

128+
// Reference for search input
129+
const searchRef = useRef(null);
130+
128131
return (
129132
<div className="application">
130133
<div className="application__body">
@@ -133,10 +136,33 @@ function QuestionAnswering({ application, showSettings }) {
133136
</div>
134137
<div className="application__content">
135138
<h4>What would you like to know?</h4>
136-
<div className="qa__input">
139+
<Form className="qa__input"
140+
onSubmit={evt => {
141+
evt.preventDefault();
142+
143+
// Step 1: Set processing to true
144+
setProcessing(true);
145+
146+
// Step 2: Trigger ask function
147+
ask(
148+
questionText,
149+
retrievers.selectedRetriever,
150+
selectedCollection,
151+
readers.selectedReader,
152+
setAnswers,
153+
setProcessing,
154+
setProcessed,
155+
dispatch
156+
);
157+
158+
// Sets the focus on search input, accessing it through its reference
159+
searchRef.current.focus();
160+
}}
161+
>
137162
<div className="qa__input--box">
138163
<Search
139164
id="qa__question"
165+
ref={searchRef}
140166
labelText={questionText}
141167
placeholder={strings.PLACEHOLDER_QUESTION}
142168
disabled={
@@ -155,20 +181,6 @@ function QuestionAnswering({ application, showSettings }) {
155181
setProcessed(false);
156182
setQuestionText(event.target.value);
157183
}}
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-
}}
172184
onClick={() => {
173185
setShowSuggestedQuestions(true);
174186
}}
@@ -205,40 +217,8 @@ function QuestionAnswering({ application, showSettings }) {
205217
) : null}
206218
</div>
207219
<Button
208-
className="qa__question--submit-btn"
209220
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-
}}
221+
type="submit"
242222
disabled={
243223
disabled ||
244224
!retrievers.selectedRetriever ||
@@ -249,7 +229,7 @@ function QuestionAnswering({ application, showSettings }) {
249229
>
250230
Ask
251231
</Button>
252-
</div>
232+
</Form>
253233
{questionText !== strings.PLACEHOLDER_QUESTION ? (
254234
<div className="answers">
255235
{(processing || processed) && questionText ? (

‎src/applications/reading/index.js

Lines changed: 30 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,9 @@ function Reading({ application, showSettings }) {
117117
const readers = useSelector((state) => state.readers);
118118
const dispatch = useDispatch();
119119

120+
// Reference for question input
121+
const questionRef = useRef(null);
122+
120123
return (
121124
<div className="application">
122125
<div className="application__body">
@@ -137,9 +140,31 @@ function Reading({ application, showSettings }) {
137140
setContext(event.target.value);
138141
}}
139142
></TextArea>
140-
<div className="reading__input--box">
143+
<Form className="reading__input--box"
144+
onSubmit={evt => {
145+
evt.preventDefault();
146+
147+
// Step 1: Set processing to true
148+
setProcessing(true);
149+
150+
// Step 2: Trigger read function
151+
read(
152+
questionText,
153+
context,
154+
readers.selectedReader,
155+
setAnswers,
156+
setProcessing,
157+
setProcessed,
158+
dispatch
159+
);
160+
161+
// Sets the focus on question input, accessing it through its reference
162+
questionRef.current.focus();
163+
}}
164+
>
141165
<TextInput
142166
id="reading__question"
167+
ref={questionRef}
143168
labelText={"Question"}
144169
placeholder={strings.PLACEHOLDER_QUESTION}
145170
disabled={disabled || !context || !readers.selectedReader}
@@ -152,53 +177,10 @@ function Reading({ application, showSettings }) {
152177
setProcessed(false);
153178
setQuestionText(event.target.value);
154179
}}
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-
}}
168180
></TextInput>
169181
<Button
170-
className="reading__question--submit-btn"
171182
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-
}}
183+
type="submit"
202184
disabled={
203185
disabled ||
204186
!context ||
@@ -208,7 +190,7 @@ function Reading({ application, showSettings }) {
208190
>
209191
Ask
210192
</Button>
211-
</div>
193+
</Form>
212194
</div>
213195
{questionText !== strings.PLACEHOLDER_QUESTION ? (
214196
<div className="answers">

‎src/applications/retrieval/index.js

Lines changed: 30 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,9 @@ function Retrieval({ application, showSettings }) {
103103
const retrievers = useSelector((state) => state.retrievers);
104104
const dispatch = useDispatch();
105105

106+
// Reference for search input
107+
const searchRef = useRef(null);
108+
106109
return (
107110
<div className="application">
108111
<div className="application__body">
@@ -111,10 +114,32 @@ function Retrieval({ application, showSettings }) {
111114
</div>
112115
<div className="application__content">
113116
<h4>What would you like to know?</h4>
114-
<div className="qa__input">
117+
<Form className="qa__input"
118+
onSubmit={evt => {
119+
evt.preventDefault();
120+
121+
// Step 1: Set processing to true
122+
setProcessing(true);
123+
124+
// Step 2: Trigger ask function
125+
ask(
126+
questionText,
127+
retrievers.selectedRetriever,
128+
selectedCollection,
129+
setDocuments,
130+
setProcessing,
131+
setProcessed,
132+
dispatch
133+
);
134+
135+
// Sets the focus on search input, accessing it through its reference
136+
searchRef.current.focus();
137+
}}
138+
>
115139
<div className="qa__input--box">
116140
<Search
117141
id="qa__question"
142+
ref={searchRef}
118143
labelText={questionText}
119144
placeholder={strings.PLACEHOLDER_QUESTION}
120145
disabled={
@@ -181,38 +206,8 @@ function Retrieval({ application, showSettings }) {
181206
) : null}
182207
</div>
183208
<Button
184-
className="qa__question--submit-btn"
185209
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-
}}
210+
type="submit"
216211
disabled={
217212
disabled ||
218213
!retrievers.selectedRetriever ||
@@ -222,7 +217,7 @@ function Retrieval({ application, showSettings }) {
222217
>
223218
Ask
224219
</Button>
225-
</div>
220+
</Form>
226221
{questionText !== strings.PLACEHOLDER_QUESTION ? (
227222
<div className="documents">
228223
{(processing || processed) && questionText ? (

0 commit comments

Comments
 (0)