Editable items list within a menu

[Macacoazul01]

Hi @lcuis and thanks for developing search choices.

Using your samples i was able to create this widget for my custom class Produto:

without anything added:

with one item added:

But i'm having some problems that i couldn't solve. Here are them:

1- With the list open, if i click on the dropdown, the list doesnt close. The same thing happens if i click on the already selected Produto or another one item of the list. If i click on another, the selected one changes at least.

2- When i click on 'adicionar novo produto' to add another item, the item is added but the list doesnt refresh, only the selected item on the dropdown, also the list isn't closing by itself like your Single dialog editable items:

3 - If i have only one item on the list and i try to delete it, there is this error. In your sample it doesn't happened:

4- If i have more than one item, the list doesn't refresh like your sample.

(both 3 and 4 seem related)

package version: search_choices: ^2.0.16
sample project:
search.zip

I don't know if these errors are from the package or the code (probably the latter).

Can you please help me?

[lcuis]

Hello @Macacoazul01 ,

Thanks for raising this issue.

I was able to integrate your example to my example file without the Get part:
main.dart.zip

1.1 Click on dropdown button while menu is opened doesn't close menu. I confirm this is a bug in search_choices. I would like to fix it whenever possible.
1.2 Select same item or another item in the menu doesn't close the menu. I see indeed this issue and I don't know where this is coming from for now.

2.1 When adding an item, the list in the menu doesn't refresh. I witness this behavior. This would be solved if next point is solved.
2.2 When adding an item, the item is selected but the menu is not closed. I confirm this but I am not sure how this can be solved at the moment.

3. Remove the last item leads to index error. I need to check why this is happening.

4. Adding a second item doesn't display it in the menu. I need to check why this is happening.

Sorry for the inconvenience and thanks for reporting!

I will post again here when I have something new regarding these points.

[Macacoazul01]

Some problems seem related to the searchfn parameter + custom dropdown cells combo.
You didn't use the searchfn on the original sample

[Macacoazul01]

gonna fork your package and try to help

[Macacoazul01]

The delete problem:

When i didn't change the searchfn, line 1996 is called after a deletion in the list.

With the search function, line 1981 was called only when the list opens and not after the deletion too.

[Macacoazul01]

a convenient way to solve 1.2, 2.1 and 2.2 is to call something like showDialogOrMenu(String searchTerms) when the parameter dialogBox: false. This would trigger the code on line 1230, closing the dropdown (on the pull request version i've made).

These errors aren't present on your example because you pop the dialog after adding the new item, so there's no need to 'refresh the list on the dialog'.
If i comment the line:

Navigator.pop(
                      MyApp.navKey.currentState?.overlay?.context ??
                          context);

Your sample won't refresh the list also.

[Macacoazul01]

Your sample won't refresh the list also.

this happens with and without the custom displayItem: parameter

[lcuis]

Thanks a lot for your help @Macacoazul01 .

I hope to come back to you on this soon.

[lcuis]

Here is the content of version 2.0.17 deployed on pub.dev

• Bug 63 1.1 Click on dropdown button while menu is opened doesn't close menu.
• Enhancement 63 1.2 Pop menu from onChanged.
• Enhancement 63 2.2 Pop menu from updateParent.
• Bug 63 3. Delete last item from menu causes index error.

I had to change your example in the following file:
main.dart.zip

I hope the adaptations and the outcome will be acceptable to you.

[Macacoazul01]

Thank you. Gonna look!

[Macacoazul01]

There are just some things that aren't problems but a little unconfortable to the final user (using the final main.dart):

1- when i delete an item the list closes
2- when i've selected a new item from the list it didn't close.

but besides this, it's perfect

[lcuis]

Hi @Macacoazul01 ,

Thanks for your feedback!

I hope we can find solutions for these issues.

[Macacoazul01]

To solve second, could be a new default value to this new pop function

onChanged: (dynamic newvalue, Function? pop) {
    if (pop != null) {
      pop();
    }
  },

[Macacoazul01]

Another option, we could have two states avaliable:

1- the dropdown state

2- the dialog/menu state

I don't know if this idea helps solving this problem, just giving you more ideas

[Macacoazul01]

More on error 2:

The onChanged function was called one time when i added the first item, 3 times when i add a second one and 0 times when i select one item in the list.

When i click on closeButton: 'Cancelar', it was called one time

[lcuis]

Hi @Macacoazul01 ,

Thanks for your patience. The following example solves the 2 latest issues in my tests:

SearchChoices.single(
        items: editableItems,
        value: selectedValueSingleMenuEditableItems,
        hint: "Select one",
        searchHint: "Select one",
        disabledHint: (Function updateParent) {
          return (TextButton(
            onPressed: () {
              addItemDialog().then((value) async {
                updateParent(value);
              });
            },
            child: Text("No choice, click to add one"),
          ));
        },
        closeButton:
            (String? value, BuildContext closeContext, Function updateParent) {
          return (editableItems.length >= 100
              ? "Close"
              : TextButton(
            onPressed: () {
              addItemDialog().then((value) async {
                if (value != null &&
                    editableItems.indexWhere(
                            (element) => element.value == value) !=
                        -1) {
                  updateParent(value,true);
                }
              });
            },
            child: Text("Add and select item"),
          ));
        },
        onChanged: (String? value, Function? pop) {
          setState(() {
            if (!(value is NotGiven)) {
              selectedValueSingleMenuEditableItems = value;
            }
          });
          if (pop != null&&!(value is NotGiven)&&value!=null) {
            pop();
          }
        },
        displayItem: (DropdownMenuItem item, selected, Function updateParent) {
          bool deleteRequested = false;
          return (GestureDetector(
            onTapUp: (tap) {
              Future.delayed(Duration(milliseconds: 300)).whenComplete(() {
                if (!deleteRequested) {
                  updateParent(item.value, true);
                }
              });
            },
            child: (Row(children: [
              selected
                  ? Icon(
                Icons.check,
                color: Colors.green,
              )
                  : Icon(
                Icons.check_box_outline_blank,
                color: Colors.transparent,
              ),
              SizedBox(width: 7),
              Expanded(
                child: item,
              ),
              IconButton(
                icon: Icon(
                  Icons.delete,
                  color: Colors.red,
                ),
                onPressed: () {
                  deleteRequested = true;
                  editableItems.removeWhere((element) => item == element);
                  updateParent(selected ? null : NotGiven(), false);
                  setState(() {});
                },
              ),
            ])),
          ));
        }

Sorry, I focused on this example as I would like to use it in the example project.

The onChanged has more conditions on the pop call.

The displayItem has a GestureDetector with an onTap to call updateParent with an optional pop set to true.

[Macacoazul01]

on my tests the gesture detector isnt doing nothing. i've put two prints inside the code and none of them were executed:

GestureDetector(
  onTapUp: (tap) {
    print('object');
    Future.delayed(Duration(milliseconds: 300)).whenComplete(() {
      print(item.value);
      if (!deleteRequested) {
        updateParent(item.value, true);
      }
    });
  },

main.zip

[lcuis]

Maybe, the GestureDetector has a different behavior on web?

[Macacoazul01]

Trying these three solutions:

https://stackoverflow.com/questions/60335245/flutter-for-web-gesturedetector-around-raisedbutton
https://stackoverflow.com/questions/52965799/flutter-gesturedetector-not-working-with-containers-in-stack
https://stackoverflow.com/questions/55727797/flutter-gesturedetector-isnt-working-at-all

On mobile is your code working?

[lcuis]

It works for me on mobile, though, I only tested on Android for now.

[Macacoazul01]

Using the AbsorbPointer fixes the gesture detector but there's a new problem... the delete stops working

https://stackoverflow.com/questions/60335245/flutter-for-web-gesturedetector-around-raisedbutton

return (GestureDetector(
    onTapUp: (tap) {
      print('object');
      Future.delayed(Duration(milliseconds: 300)).whenComplete(() {
        print(item.value);
        if (!deleteRequested) {
          updateParent(item.value, true);
        }
      });
    },
    child: AbsorbPointer(child: Row(children: [

[Macacoazul01]

fixed:

displayItem:
  (DropdownMenuItem<Produto> item, selected, Function updateParent) {
bool deleteRequested = false;
return ListTile(
  leading: selected
      ? Icon(
          Icons.check,
          color: Colors.green,
        )
      : Icon(
          Icons.check_box_outline_blank,
          color: Colors.transparent,
        ),
  title: item,
  trailing: IconButton(
    icon: Icon(
      Icons.delete,
      color: Colors.red,
    ),
    onPressed: () {
      deleteRequested = true;
      produtosDropList.removeWhere((element) => item == element);
      updateParent(selected ? null : NotGiven(), false);
      setState(() {});
    },
  ),
  onTap: () {
    if (!deleteRequested) {
      updateParent(item.value, true);
    }
  },
  horizontalTitleGap: 0,
);
},

[lcuis]

Excellent, thanks a lot. I will update the example accordingly as soon as I can!

[Macacoazul01]

Gonna close this issue as all of the items were solved.
Thanks @lcuis !!

[lcuis]

Thanks to you @Macacoazul01 !