this repo has no description
feat: keep focus from action parser buttons
+26
-22
+26
-22
mast-react-vite/src/components/ui/action-parser.tsx
+26
-22
mast-react-vite/src/components/ui/action-parser.tsx
···
18
18
const [selectedToggle, setSelectedToggle] = React.useState("add");
19
19
const options = ["add", "filter", "done", "delete"];
20
20
const [suggestions, setSuggestions] = React.useState<string[]>([]);
21
+
22
+
// Create internal ref for focusing
23
+
const inputRef = React.useRef<HTMLInputElement>(null);
24
+
25
+
// Helper function to focus the input
26
+
const focusInput = () => {
27
+
if (inputRef.current) {
28
+
inputRef.current.focus();
29
+
}
30
+
};
21
31
22
32
const handleToggleChange = (value: string) => {
23
33
if (value) {
···
161
171
"focus:outline-none",
162
172
className,
163
173
)}
164
-
ref={ref}
174
+
ref={inputRef}
165
175
value={value}
166
176
{...props}
167
177
/>
···
177
187
variant="ghost"
178
188
size="sm"
179
189
onClick={() => {
180
-
const input = document.querySelector('input');
181
-
if (input) {
182
-
const newValue = `${value.trim() + " " || ''} #`;
183
-
props.onChange?.({ target: { value: newValue } } as any);
184
-
}
190
+
const newValue = `${value.trim() + " " || ''}#`;
191
+
props.onChange?.({ target: { value: newValue } } as any);
192
+
focusInput();
185
193
}}
186
194
className="h-8 px-2 text-muted-foreground hover:text-foreground"
187
195
>
···
191
199
variant="ghost"
192
200
size="sm"
193
201
onClick={() => {
194
-
const input = document.querySelector('input');
195
-
if (input) {
196
-
const newValue = `${value.trim() + " " || ''}+`;
197
-
props.onChange?.({ target: { value: newValue } } as any);
198
-
}
202
+
const newValue = `${value.trim() + " " || ''}+`;
203
+
props.onChange?.({ target: { value: newValue } } as any);
204
+
focusInput();
199
205
}}
200
206
className="h-8 px-2 text-muted-foreground hover:text-foreground"
201
207
>
···
236
242
237
243
const newValue = words.join(' ');
238
244
props.onChange?.({ target: { value: newValue } } as any);
245
+
focusInput();
239
246
}}
240
247
className="h-7 px-2 text-muted-foreground hover:text-foreground whitespace-nowrap"
241
248
>
···
318
325
"focus:outline-none",
319
326
className,
320
327
)}
321
-
ref={ref}
328
+
ref={ inputRef }
322
329
value={value}
323
330
{...props}
324
331
/>
···
334
341
variant="ghost"
335
342
size="sm"
336
343
onClick={() => {
337
-
const input = document.querySelector('input');
338
-
if (input) {
339
-
const newValue = `${value || ''} #`;
340
-
props.onChange?.({ target: { value: newValue } } as any);
341
-
}
344
+
const newValue = `${value.trim() + " " || ''}#`;
345
+
props.onChange?.({ target: { value: newValue } } as any);
346
+
focusInput();
342
347
}}
343
348
className="h-8 px-2 text-muted-foreground hover:text-foreground"
344
349
>
···
348
353
variant="ghost"
349
354
size="sm"
350
355
onClick={() => {
351
-
const input = document.querySelector('input');
352
-
if (input) {
353
-
const newValue = `${value || ''} +`;
354
-
props.onChange?.({ target: { value: newValue } } as any);
355
-
}
356
+
const newValue = `${value.trim() + " " || ''}+`;
357
+
props.onChange?.({ target: { value: newValue } } as any);
358
+
focusInput();
356
359
}}
357
360
className="h-8 px-2 text-muted-foreground hover:text-foreground"
358
361
>
···
393
396
394
397
const newValue = words.join(' ');
395
398
props.onChange?.({ target: { value: newValue } } as any);
399
+
focusInput();
396
400
}}
397
401
className="h-7 px-2 text-muted-foreground hover:text-foreground whitespace-nowrap"
398
402
>