How to prevent adding empty row at the end?

[PavelTurk]

I use material_tag_editor with my custom tags.

This is my code:

               TagEditor(
                      length: ....,
                      controller: ....,
                      focusNode: _focusNode,
                      maxLines: 1,
                      delimiters: [','],
                      hasAddButton: false,
                      resetTextOnSubmitted: true,
                      // This is set to grey just to illustrate the `textStyle` prop
                      textStyle: const TextStyle(color: Colors.black87),
                      onSubmitted: (outstandingValue) {
                        setState(() {
                          ....
                        });
                      },
                      inputDecoration: const InputDecoration(
                        border: InputBorder.none,
                        // hintText: 'Hint Text...',
                      ),
                      onTagChanged: (newValue) {
                        // setState(() {
                        //
                        // });
                      },
                      tagBuilder: (context, index) => _Chip(
                        key: ....,
                        index: index,
                        user: ...,
                        onDeleted: _onChipDelete,
                      ),
                      // InputFormatters example, this disallow \ and /
                      inputFormatters: [
                        FilteringTextInputFormatter.deny(RegExp(r'[/\\]'))
                      ],
                    ),

This is TagEditor with two tags:

You can see divider that is under TagEditor. Now we add one more tag:

As you see now we have empty row under tags. Could anyone say how to add new row only when it is needed?

[PavelTurk]

@panuavakul Any ideas?

[panuavakul]

@PavelTurkish Hey could you give me a minimal reproducible code I could debug on?

[panuavakul]

@PavelTurkish Actually this looks like an expected behavior. The TagEditor is running out of space to put the new TextField at the end so it actually put the TextField in the new line.

Please play with the minTextFieldWidth to get the behavior you want.

[PavelTurk]

@panuavakul Thank you for your answer. I tried minTextFieldWidth. It helped a little, but there is some problem with it. Look, what is happening, when I use minTextFieldWidth: 25:

https://user-images.githubusercontent.com/10261361/211016018-4ccffa71-b8b9-43a3-83e1-ddcf658af6fd.mp4

As you see, when I type then text is scrolling inside "text field". However, it is not a good solution. I checked how such solutions work in different applications and everywhere when text is too long to be at the end of the row, then new line is added and new tag is moved to the added line. And if on the new line I delete some chars and text again fits in the previous line then new line is removed and tag comes to previous line.

For example, we have three tags: a,b, c :

aaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbb ccccccccccc

now we add a new tag (d). As d fits in the second line, the third line is not added:

aaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbb ccccccccccc ddddd

However, if d doesn't fit in, then a new line is added:

aaaaaaaaaaaaaaaaaaaaaaaaaa
bbbbbbbbb ccccccccccc 
dddddddddddddddddd

Can we do something like this with tag editor?

[panuavakul]

@PavelTurkish I see what you mean. Unfortunately, in the current version there aren't anyway to do that since it is an expected behavior.

I'm assuming you want something like this. https://github.com/panuavakul/material_tag_editor/pull/45

I was able to implement the desired behavior, but I do not think I will be able to release it due to problem with TextField prefix/suffix width mismatch.

I might try to release a prerelease version next week if I have time, but not really sure if I will be able to work on it soon.

You are welcome to try it out with the PR's branch and let me know your feedback. However, I strongly don't recommend using it in any production environment.

[PavelTurk]

@panuavakul Yes, thank you. This is what I need. So, I am looking forward to the prerelease. Thank you very much.

[panuavakul]

@PavelTurkish Sorry for the wait. Please use this version for now https://pub.dev/packages/material_tag_editor/versions/0.2.0-dev.1 Please note, I did not have a lot of time to check so it might not be stable.

I'll keep this issue open until it is released. Please also let me know if you find any bugs with the implementation.

[PavelTurk]

@panuavakul I've checked prerelease. Everything seems to work. Thank you very much. Could you say when you plan to release it?

[panuavakul]

@PavelTurkish Hey, I'm still not sure how I should tackle the pre/suffix problem and I'm a bit busy this month and Feb 😢 I'll try to see if I can work on it earlier but looking around March 🤞