fix: improve IME compatibility by changing form submission to Ctrl/Cmd+Enter

- Remove automatic form submission on Enter key to prevent conflicts with IME
- Add Ctrl+Enter (Windows/Linux) and Cmd+Enter (Mac) as submission shortcuts
- Preserve native textarea behavior for line breaks with Shift+Enter
- Fix issue where Japanese/Chinese/Korean input confirmation triggered form submission
This commit is contained in:
kahirokunn
2025-06-04 18:04:35 +09:00
parent fddf107e0a
commit b0dd02b92e

View File

@@ -35,10 +35,9 @@ export const InputForm: React.FC<InputFormProps> = ({
setInternalInputValue(""); setInternalInputValue("");
}; };
const handleInternalKeyDown = ( const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
e: React.KeyboardEvent<HTMLTextAreaElement> // Submit with Ctrl+Enter (Windows/Linux) or Cmd+Enter (Mac)
) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
if (e.key === "Enter" && !e.shiftKey) {
e.preventDefault(); e.preventDefault();
handleInternalSubmit(); handleInternalSubmit();
} }
@@ -59,9 +58,9 @@ export const InputForm: React.FC<InputFormProps> = ({
<Textarea <Textarea
value={internalInputValue} value={internalInputValue}
onChange={(e) => setInternalInputValue(e.target.value)} onChange={(e) => setInternalInputValue(e.target.value)}
onKeyDown={handleInternalKeyDown} onKeyDown={handleKeyDown}
placeholder="Who won the Euro 2024 and scored the most goals?" placeholder="Who won the Euro 2024 and scored the most goals?"
className={`w-full text-neutral-100 placeholder-neutral-500 resize-none border-0 focus:outline-none focus:ring-0 outline-none focus-visible:ring-0 shadow-none className={`w-full text-neutral-100 placeholder-neutral-500 resize-none border-0 focus:outline-none focus:ring-0 outline-none focus-visible:ring-0 shadow-none
md:text-base min-h-[56px] max-h-[200px]`} md:text-base min-h-[56px] max-h-[200px]`}
rows={1} rows={1}
/> />