Flutter TextField: Cursor position goes to one before the last when selecting a RTL TextField

user_7360393 0
Viewed 271

I have a TextField with its textDirection set to rtl (Right-to-Left). When I select the TextField, I expect the cursor go to the end, as usual, but cursor goes to one position before the end.

this is the result

 TextField(
    textDirection: TextDirection.rtl,
    controller: widget.controller,
    decoration: InputDecoration(
      contentPadding: EdgeInsets.all(8),
      isDense: true,
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(
          width: 2,
          color: Theme.of(context).primaryColor,
        ),
        borderRadius: BorderRadius.circular(8),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(
          width: 1.7,
          color: Colors.grey.withOpacity(0.3),
        ),
        borderRadius: BorderRadius.circular(8),
      ),
    ),
  ),
);

How can I make the cursor appear at the end instead?

UPDATE: I realized that specifying controller in the TextField make the problem appear. but i need cotroller in this situation.

flutter
4 Answers

I think this because of each arabic character is encoded as 2 to 4 bytes.

Any way this code can do the trick

TextField(
     onTap: (){
          if(controller.selection == TextSelection.fromPosition(TextPosition(offset: controller.text.length -1))){
             setState(() {
                 controller.selection = TextSelection.fromPosition(TextPosition(offset: controller.text.length));
             });
           }
     },
     controller: controller,
     ...
);
user_28153980

You can control cursor position by using TextSelection.

I didn't test Arabic environment, but try this.

offset value means position of cursor, so test 0 or (widget.controller.text.length)

   TextField(
        textDirection: TextDirection.rtl,
        controller: widget.controller
                    ..selection = TextSelection.fromPosition(TextPosition(offset: 0)),
        decoration: InputDecoration(
          contentPadding: EdgeInsets.all(8),
          isDense: true,
          focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 2,
              color: Theme.of(context).primaryColor,
            ),
            borderRadius: BorderRadius.circular(8),
          ),
          enabledBorder: OutlineInputBorder(
            borderSide: BorderSide(
              width: 1.7,
              color: Colors.grey.withOpacity(0.3),
            ),
            borderRadius: BorderRadius.circular(8),
          ),
        ),
      ),
    );
user_39021010

You can try this action to move the cursor to the end of the text. Then place this controller in the controller in TextField.:

late TextEditingController _textEditingController;

@override
  void initState() {
    _textEditingController = TextEditingController(text: widget.text);
    _textEditingController.selection = TextSelection.fromPosition(
        TextPosition(offset: _textEditingController.text.length));
    super.initState();
  }
user_168844340

You can fix it by add this function on your textfield

onTap: () {
     if (searchController.text[searchController.text.length - 1] != ' ') {
         searchController.text = (searchController.text + ' ');
          }
      if (searchController.selection ==TextSelection.fromPosition(
                                TextPosition(offset: 
            searchController.text.length - 1))) {
                 setState(() {});
          }
      }
user_140361780
Related