henryleunghk / flutter-native-text-input

Native text input for Flutter
MIT License
66 stars 50 forks source link

[BUG] Place holder not working #19

Closed Nico3652 closed 2 years ago

Nico3652 commented 2 years ago

I'm facing weird behavior using the place holder.

Here is the behavior :

Enregistrement de l’écran 2021-12-04 à 15 30 19

Thanks in advance for fix

henryleunghk commented 2 years ago

May you share your code snippets? I could not reproduce with the example app.

https://user-images.githubusercontent.com/28475298/144735620-738678ae-b79c-400a-9d83-53c52e1d72b7.mov

Nico3652 commented 2 years ago

I was facing this issue again so in order to be sure it was not from my code around the text field inside my chat app I wrote an example app to better observe the behavior . (v1.2.2)

The problems I'm getting :

Here is the preview of what's happening :

https://user-images.githubusercontent.com/50270977/144758040-726823e0-994a-465c-89bc-b1adfb9f12f0.mov

I think I found the issue for the place holder, the problem come from the textEditingController. I tested the nativeTextField without the controller and it worked. Seems the controller is acting on it.

Here is the full sample code of this video that you can copy/paste and run :

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_native_text_input/flutter_native_text_input.dart';

void main() {
  runApp(const TestApp());
}

class TestApp extends StatefulWidget {
  const TestApp({Key? key}) : super(key: key);

  @override
  _TestAppState createState() => _TestAppState();
}

class _TestAppState extends State<TestApp> {

  TextEditingController textEditingController = TextEditingController();
  TextEditingController cupertinoTextController = TextEditingController();
  FocusNode focusNode = FocusNode();
  FocusNode cupertinoFocusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('NativeTextField with textEditingController '),
              SizedBox(height: 15),
              SizedBox(
                width: 180,
                child: NativeTextInput(
                  decoration: BoxDecoration(
                    color: Colors.grey.withOpacity(0.3)
                  ),
                    controller: textEditingController,
                    returnKeyType: ReturnKeyType.send,
                    maxLines: 4,
                    minLines: 1,
                    focusNode: focusNode,
                    placeholder: 'placeholder',
                    onSubmitted: _onSubmittedText
                ),
              ),
              SizedBox(height: 30),
              SizedBox(height: 30),
              Text('CupertinoTextField with textEditingController'),
              SizedBox(height: 15),
              SizedBox(
                width: 180,
                child: CupertinoTextField(
                    decoration: BoxDecoration(
                        color: Colors.grey.withOpacity(0.3)
                    ),
                    controller: cupertinoTextController,
                    textInputAction: TextInputAction.send,
                    maxLines: 4,
                    minLines: 1,
                    focusNode: cupertinoFocusNode,
                    placeholder: 'placeholder',
                    onSubmitted: _onSubmittedCupertinoText
                ),
              ),
            ],
          ),
        )
      )
    );
  }

  _onSubmittedText(value) {
    textEditingController.clear();
    FocusScope.of(context).requestFocus(focusNode);
  }

  _onSubmittedCupertinoText(value) {
    cupertinoTextController.clear();
    FocusScope.of(context).requestFocus(cupertinoFocusNode);
  }
}