this repo has no description
2
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: keep focus from action parser buttons

+26 -22
+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 >