[Bug]: List elements don't scroll in edit/preview mode

[kamal0808]

Is there an existing issue for this?

• I have searched the existing issues

Description

When lists are made scrollable using the scroll contents option, the scroll is visible only in the first element of the list.
This happens for the scroll of the list's {{currentItem}}, as well all widgets inside the list that need scrolling.
For example, if used a container/iframe inside the list view, and they require scrolling, only first element of the list will have scrollable containers/iframes (It scrolls only for text widgets right now).

Although, it works fine in deploy mode. May be it is created deliberately by design in such a manner, but it would make so much sense if the widgets scroll in all the items of the list.

Here's two videos showing the issue:

Screen.Recording.2023-03-02.at.6.21.32.PM.mov

Screen.Recording.2023-03-02.at.6.28.39.PM.mov

Here's another video of the deployed mode showing correct behaviour:

Screen.Recording.2023-03-02.at.6.21.32.PM.mov

I have a feeling it's not just about the scroll, but also the overall interaction of elements inside list other than the 1st element. The other elements are not just interactive for some reason. We can't click on them, scroll them, or do anything.
I'm pretty sure there's some documentation regarding this but I am not able to find any. Please let me know if there's some discussion around this already.

I've created a public sample app: https://app.appsmith.com/app/my-first-application/page1-627918ee0b47255c280c10b8
but the issue is in edit/preview mode not in deployed mode.

Steps To Reproduce

1. Go to Widgets
2. Use List Widget
3. Use scrollable: true for items in list properties.
4. Reduce the height of each list widget item so that it is scrollable
5. Try to scroll in each item of the list

You will be able to scroll only in the first element, rest will not scroll.

Public Sample App

https://app.appsmith.com/app/my-first-application/page1-627918ee0b47255c280c10b8

Environment

Production

Issue video log

No response

Version

Cloud & Self-hosted : 1.9.9

[pranavkanade]

@kamal0808, We use the first item as a template for the list widget to populate all the other items. This is a default expected behavior (inactive items except the first one). Although, I am interested in finding out more about your use case. What are you trying to achieve that needs you to look into the other items?

[kamal0808]

@pranavkanade I am trying to put iframes inside a list. I just wanted to interact with all the iframes in edit mode because it takes time to build that. Right now the workaround for me is to push commits after each change, then go to deployment mode and then see if it works for all iframes in the list. If it doesn't, then repeat the cycle.
If for some reason the preview mode gave me option to interact with iframes, I would have saved a tonne of time.

I would understand if there was a valid reason for this "inactive" behaviour.

[pranavkanade]

@dilippitchika Check this out

[dilippitchika]

Hey @kamal0808 can i understand why you are trying to add iframes in the list? I wanted to understand your use-case better.

[kamal0808]

@dilippitchika I wanted to use a pretty-json component for my app, so I built one using HTML. Here's the attached video of the iframes that refer to this HTML. On clicking any key, it copies the nested path of the key. While developing this, to check nested path of each key, I need to click different keys in different frames like I do below. But it's not really possible in edit or preview mode.

Screen.Recording.2023-03-08.at.11.15.34.AM.mov

P.S. It could also become a good addition as a feature widget, if people want it