fix: [DX-1926] Fix placeholder alignment in the multiline input (#646)

MewsSystems · Aug 7, 2024 · 192fb7a · 192fb7a
1 parent 9d4f314
commit 192fb7a
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 3 deletions.
diff --git a/optimus/lib/src/common/field_wrapper.dart b/optimus/lib/src/common/field_wrapper.dart
@@ -26,6 +26,7 @@ class FieldWrapper extends StatefulWidget {
     this.inline = false,
     this.multiline = false,
     this.statusBarState,
+    this.placeholder,
   });
 
   final bool isEnabled;
@@ -48,6 +49,7 @@ class FieldWrapper extends StatefulWidget {
   final bool inline;
   final bool multiline;
   final OptimusStatusBarState? statusBarState;
+  final Widget? placeholder;
 
   bool get hasError {
     final error = this.error;
@@ -175,6 +177,8 @@ class _FieldWrapper extends State<FieldWrapper> with ThemeGetter {
                             child: prefix,
                           ),
                         ),
+                      if (widget.placeholder case final placeholder?)
+                        placeholder,
                       ...widget.children,
                       if (widget.suffix case final suffix?)
                         Padding(

diff --git a/optimus/lib/src/form/input_field.dart b/optimus/lib/src/form/input_field.dart
@@ -115,7 +115,10 @@ class OptimusInputField extends StatefulWidget {
   /// An optional text to display before the input.
   final Widget? prefix;
 
+  /// The [Key] for the input field.
   final Key? inputKey;
+
+  /// The [Key] for the field box.
   final Key? fieldBoxKey;
 
   /// An optional text to display after the text.
@@ -128,8 +131,10 @@ class OptimusInputField extends StatefulWidget {
   /// {@macro flutter.widgets.editableText.readOnly}
   final bool readOnly;
 
+  /// The callback to be called when the field is tapped.
   final VoidCallback? onTap;
 
+  /// The horizontal alignment of the text.
   final TextAlign textAlign;
 
   /// {@macro flutter.widgets.editableText.textCapitalization}
@@ -268,6 +273,22 @@ class _OptimusInputFieldState extends State<OptimusInputField>
         () => _isShowPasswordEnabled = !_isShowPasswordEnabled,
       );
 
+  Widget? get _placeholder {
+    final placeholder = widget.placeholder;
+    if (placeholder != null &&
+        _effectiveController.text.isEmpty &&
+        !_effectiveFocusNode.hasFocus) {
+      return GestureDetector(
+        onTap: _effectiveFocusNode.requestFocus,
+        child: Text(
+          placeholder,
+          style: widget.placeholderStyle ??
+              theme.getTextInputStyle(isEnabled: widget.isEnabled),
+        ),
+      );
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final error = widget.error;
@@ -324,6 +345,8 @@ class _OptimusInputFieldState extends State<OptimusInputField>
           : null,
       fieldBoxKey: widget.fieldBoxKey,
       size: widget.size,
+      placeholder:
+          _placeholder, // TODO(witwash): rework when https://github.com/flutter/flutter/issues/138794 is fixed
       children: [
         Expanded(
           child: CupertinoTextField(
@@ -341,9 +364,6 @@ class _OptimusInputFieldState extends State<OptimusInputField>
             minLines: _minLines,
             onSubmitted: widget.onSubmitted,
             textInputAction: widget.textInputAction,
-            placeholder: widget.placeholder,
-            placeholderStyle: widget.placeholderStyle ??
-                theme.getPlaceholderStyle(isEnabled: widget.isEnabled),
             focusNode: _effectiveFocusNode,
             enabled: widget.isEnabled,
             padding: EdgeInsets.zero,