[Bug]: Issues with access to currentItem in MenuButton

[pabadrubio]

Is there an existing issue for this?

• [X] I have searched the existing issues

Description

When I add a MenuButton with dynamic source data inside a List widget, access to currentItem and currentIndex is inconsistent.

For example, when configuring menu items, in the Label field currentItem returns the expected value from the MenuButton dynamic source data. However, in the onClick event using currentItem returns the currentItem from the containing list instead.

Interestingly, the autocomplete inside the onClick for currentItem refers to the MenuItem dynamic data source.

The thing is that it is impossible to access the MenuButton currentItem in the onClick event and it is not possible to access the List currentItem in the Label (though it could be accessed via the list triggeredItem)

The same happens with currentIndex

Steps To Reproduce

1. Create a List widget
2. Inside the List widget container create a MenuButton
3. Set the MenuItems as Dynamic and add some sample data
4. Click configure menu items and inside onClick add the code:

   {{
   console.log(currentItem);
   }}

5. Click on any element in the MenuButton and check the logs
6. The List currentItem is shown instead of the MenuButton currentItem

Public Sample App

https://app.appsmith.com/app/errordemo/page1-654b8730a1377b2e0f79e9b1/edit

Environment

Production

Issue video log

No response

Version

All

[Nikhil-Nandagopal]

@pabadrubio could you explain what you are trying to accomplish? You should be able to access the menu item that triggered the button in any query or js as {{List1.triggeredItem.MenuButton}} so that should solve what you are trying to achieve

[pabadrubio]

Hi @Nikhil-Nandagopal. I am talking about the case where I have a MenuButton with a dynamic source data. I want to execute some action inside the onClick function of the MenuButton. The problem is that in this onClick action of the MenuButton I can't access currentItem when it is placed inside a List.

Let's forget the List and say that I have a MenuButton with some dynamic source elements. I fetch them from a query that returns a list of actions. For example:

[
  { "label": "move"},
  { "label": "jump"},
  { "label": "swim"}
]

With a dynamic source I have a single onClick function inside the MenuButton. When I click one of the elements I want to execute some JS code based on the action. So I would use inside the onClick event JS code currentItem.label to access it. The problem is that if this MenuButton is placed inside a List, this is not possible. And this is because currentItem is not referencing currentItem of the MenuButton anymore, but the currentItem of the enclosing List.

And on top of this the behaviour of using currentItem inside the Label of the MenuButton is different that the behavior of using currentItem inside the onClick function.

I hope this is clearer now.

[Nikhil-Nandagopal]

@pabadrubio thanks that's a lot clearer.