Cw 769 fix transaction notes not showing (#1718)

* use focusNode instead of onTapOutside for TextFieldListRow

* add a transaction description box to the backup

* fix

---------

Co-authored-by: OmarHatem <omarh.ismail1@gmail.com>

lib/src/screens/transaction_details/widgets/textfield_list_row.dart

@@ -1,27 +1,49 @@
-import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
-import 'package:flutter/material.dart';
 import 'package:cake_wallet/generated/i18n.dart';
+import 'package:cake_wallet/themes/extensions/cake_text_theme.dart';
 import 'package:cake_wallet/themes/extensions/transaction_trade_theme.dart';
+import 'package:flutter/material.dart';
 
-class TextFieldListRow extends StatelessWidget {
+class TextFieldListRow extends StatefulWidget {
   TextFieldListRow(
       {required this.title,
       required this.value,
       this.titleFontSize = 14,
       this.valueFontSize = 16,
-      this.onSubmitted,
-      this.onTapOutside})
-      : _textController = TextEditingController() {
-    _textController.text = value;
-  }
+      this.onSubmitted});
 
   final String title;
   final String value;
   final double titleFontSize;
   final double valueFontSize;
   final Function(String value)? onSubmitted;
-  final Function(String value)? onTapOutside;
-  final TextEditingController _textController;
+
+  @override
+  _TextFieldListRowState createState() => _TextFieldListRowState();
+}
+
+class _TextFieldListRowState extends State<TextFieldListRow> {
+  late TextEditingController _textController;
+  late FocusNode _focusNode;
+
+  @override
+  void initState() {
+    super.initState();
+    _textController = TextEditingController(text: widget.value);
+    _focusNode = FocusNode();
+
+    _focusNode.addListener(() {
+      if (!_focusNode.hasFocus) {
+        widget.onSubmitted?.call(_textController.text);
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _textController.dispose();
+    _focusNode.dispose();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -29,41 +51,48 @@ class TextFieldListRow extends StatelessWidget {
       width: double.infinity,
       color: Theme.of(context).colorScheme.background,
       child: Padding(
-        padding:
-        const EdgeInsets.only(left: 24, top: 16, bottom: 16, right: 24),
+        padding: const EdgeInsets.only(left: 24, top: 16, bottom: 16, right: 24),
         child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: <Widget>[
-              Text(title,
-                  style: TextStyle(
-                      fontSize: titleFontSize,
-                      fontWeight: FontWeight.w500,
-                      color: Theme.of(context).extension<TransactionTradeTheme>()!.detailsTitlesColor),
-                  textAlign: TextAlign.left),
-              TextField(
-                controller: _textController,
-                keyboardType: TextInputType.multiline,
-                textInputAction: TextInputAction.done,
-                maxLines: null,
-                textAlign: TextAlign.start,
-                style: TextStyle(
-                    fontSize: valueFontSize,
-                    fontWeight: FontWeight.w500,
-                    color:
-                        Theme.of(context).extension<CakeTextTheme>()!.titleColor),
-                decoration: InputDecoration(
-                    isDense: true,
-                    contentPadding: EdgeInsets.only(top: 12, bottom: 0),
-                    hintText: S.of(context).enter_your_note,
-                    hintStyle: TextStyle(
-                        fontSize: valueFontSize,
-                        fontWeight: FontWeight.w500,
-                        color: Theme.of(context).extension<TransactionTradeTheme>()!.detailsTitlesColor),
-                    border: InputBorder.none),
-                onTapOutside: (_) => onTapOutside?.call(_textController.text),
-                onSubmitted: (value) => onSubmitted?.call(value),
-              )
-            ]),
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            Text(
+              widget.title,
+              style: TextStyle(
+                fontSize: widget.titleFontSize,
+                fontWeight: FontWeight.w500,
+                color: Theme.of(context).extension<TransactionTradeTheme>()!.detailsTitlesColor,
+              ),
+              textAlign: TextAlign.left,
+            ),
+            TextField(
+              controller: _textController,
+              focusNode: _focusNode,
+              keyboardType: TextInputType.multiline,
+              textInputAction: TextInputAction.done,
+              maxLines: null,
+              textAlign: TextAlign.start,
+              style: TextStyle(
+                fontSize: widget.valueFontSize,
+                fontWeight: FontWeight.w500,
+                color: Theme.of(context).extension<CakeTextTheme>()!.titleColor,
+              ),
+              decoration: InputDecoration(
+                isDense: true,
+                contentPadding: EdgeInsets.only(top: 12, bottom: 0),
+                hintText: S.of(context).enter_your_note,
+                hintStyle: TextStyle(
+                  fontSize: widget.valueFontSize,
+                  fontWeight: FontWeight.w500,
+                  color: Theme.of(context).extension<TransactionTradeTheme>()!.detailsTitlesColor,
+                ),
+                border: InputBorder.none,
+              ),
+              onSubmitted: (value) {
+                widget.onSubmitted?.call(value);
+              },
+            ),
+          ],
+        ),
       ),
     );
   }

lib/src/screens/unspent_coins/unspent_coins_details_page.dart

@@ -44,7 +44,6 @@ class UnspentCoinsDetailsPage extends BasePage {
             return TextFieldListRow(
               title: item.title,
               value: item.value,
-              onTapOutside: item.onSubmitted,
               onSubmitted: item.onSubmitted,
             );
           }