TextFieldで日本語入力中のEnterキーを拾いたくない問題 – 開発日記(77)

// 【TextFieldで編集中の、Enterキーのイベント処理について】
//・テキスト編集時のキー動作のoverrideについて 「Text Editing Actions」 https://zenn.dev/inari_sushio/articles/a65da631a5c6da
//
// 　■Webでの処理順
// 　　日本語入力無しでEnter
//　 　　(1) IdeaState.onEditingComplete
//　 　　(2) IdeaState.onSubmitted
// 　　　(3) RawKeyUpEvent.Enter (DownEventは取れるときと取れない時がある)
// 　　日本語入力中のEnter
// 　　　(1) RawKeyDownEvent.Enter
// 　■PCでの処理順
// 　　日本語入力無しでEnter
// 　　　(1) RawKeyDownEvent.Enter
// 　　　(2) IdeaState.onEditingComplete
// 　　　(3) IdeaState.onSubmitted
// 　　　(4) RawKeyUpEvent.Enter
// 　　日本語入力中のEnter
// 　　　何もイベント発生せず
//
//・【TextFieldでEnterを押した場合のキーの処理の違いについて】
//　・webだと、submit→key webの順で処理される
//　・windowsだと、key → submitの順で処理される

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var controller = TextEditingController();

  @override
  void initState() {
    controller.addListener(_onTextControllerChanged);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Focus(
          onKeyEvent: _detectKeyEvent,
          child: TextField(
            controller: controller,
          ),
        ),
      ),
    );
  }

  KeyEventResult _detectKeyEvent(FocusNode node, KeyEvent event) {
    if (event.logicalKey.keyLabel == 'Enter') {
      print("KeyDownEvent:${event is KeyDownEvent}");
      // How to detect that Enter was hit at composing state or not?
      print("value.composing.isValid:${controller.value.composing.isValid}");
      print("value.composing.isCollapsed:${controller.value.composing.isCollapsed}");
    }
    return KeyEventResult.ignored;
  }

  void _onTextControllerChanged() {
    // print("value.composing.isValid:${controller.value.composing.isValid}");
    // print("value.composing.isCollapsed:${controller.value.composing.isCollapsed}");
    // if (controller.value.isComposingRangeValid) {
    //   print("value.composing.textInside(value.text):${controller.value.composing.textInside(controller.value.text)}");
    // } else {
    //   print("value.composing.isComposingRangeValid:false");
    // }
  }
}

//ソースのイメージ

return Focus(
  onKeyEvent: _processKeysAtEditingIdea,
  child: textField,
);

//～

KeyEventResult _processKeysAtEditingIdea(FocusNode node, KeyEvent keyEvent) {
  if (keyEvent.logicalKey.keyLabel == 'Enter' && keyEvent is KeyDownEvent) {
    //WebではComposing中でもキーを捉えてしまうので、その場合は後続処理を行わないでリターン
    if (textController.value.composing.isValid) {
      return KeyEventResult.ignored;
    }
    //... 以降にやりたい処理を書く
    return KeyEventResult.handled;
  }
  return KeyEventResult.ignored;
}