Skip to content

.update() for children causes ReorderableListView to forget item order #5093

Open
@typedecker

Description

@typedecker

Duplicate Check

Describe the bug

When using ReorderableListView alongside Custom Controls as items, if any child controls within the custom control are updated, or the custom control itself is updated, the list view forgets the current index of the item, and refreshes back to the original order.

Code sample

I've combined the code provided in the Custom Controls docs for composite controls, with the ReorderableListView code in this Minimal Reproducible Sample. If the list item order is changed, and then the edit button is clicked, it switches the order back due to the call to `.update()`.
import flet as ft

class Task(ft.Row):
    def __init__(self, text):
        super().__init__()
        self.text_view = ft.Text(text)
        self.text_edit = ft.TextField(text, visible=False)
        self.edit_button = ft.IconButton(icon=ft.Icons.EDIT, on_click=self.edit)
        self.save_button = ft.IconButton(
            visible=False, icon=ft.Icons.SAVE, on_click=self.save
        )
        self.controls = [
            ft.Checkbox(),
            self.text_view,
            self.text_edit,
            self.edit_button,
            self.save_button,
        ]

    def edit(self, e):
        self.edit_button.visible = False
        self.save_button.visible = True
        self.text_view.visible = False
        self.text_edit.visible = True
        self.update()

    def save(self, e):
        self.edit_button.visible = True
        self.save_button.visible = False
        self.text_view.visible = True
        self.text_edit.visible = False
        self.text_view.value = self.text_edit.value
        self.update()


def main(page: ft.Page):
    page.add(
        ft.ReorderableListView(
            [
                Task('test 1'),
                Task('test 2')
            ]
        )
    )

ft.app(main)

To reproduce

  1. Define a custom control class, a composite one. [Refer to docs]. Ensure that the custom control involves triggering the .update() method in some way.
  2. Use this custom control as a List Item in the ReorderableListView.
  3. Run the program.
  4. Reorder the list items.
  5. Try to trigger the .update() method, in whatever way you've added the trigger to your code. In case of my code sample, editing the task should trigger the .update() method.
  6. Notice the unintentional reordering of the list view, back to it's original order.

Expected behavior

The order of the list view should have been maintained. Only the item itself should have been updated, but it's position within the list view should've remained the same.

Screenshots / Videos

Videos
github_issue_2_flet.mp4

Operating System

Windows

Operating system details

Windows 11

Flet version

0.27.6

Regression

I'm not sure / I don't know

Suggestions

Perhaps add an internal list to the class, that tracks the changes made after each reorder, and preserve the order whenever .update() is called using the list as a reference.

Logs

Additional details

This bug only happens when .update() is called on a list item.

Metadata

Metadata

Assignees

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions