[Question] Issue with DatePicker

[LeonardoYotsui123]

Question

[Translate by Chatgpt]

I'm developing an app using Flet, and I'm encountering an issue when interacting with the DatePicker component. Specifically:

After opening the DatePicker and interacting with it (either selecting a date or closing it), subsequent UI actions, such as opening a SnackBar or a Dialog, fail to work properly.
These issues only occur after interacting with the DatePicker. If I skip interacting with the DatePicker, other UI elements work as expected.
For example, after selecting a date using DatePicker:
A SnackBar fails to open.
A Dialog doesn’t appear as expected.
It seems that the DatePicker does not fully release control of the UI or leaves the interface in an incomplete state.

What I've Tried

Explicitly updating the UI after DatePicker interactions:

I ensured that page.update() was called after the DatePicker interaction to reflect any changes in the UI.
python
def open_date_picker(self, e):
e.control.page.update() # Update the page before opening the DatePicker
e.control.page.open(self.datepicker)
Listening to DatePicker events:

I added an on_change callback to detect when a date is selected and attempted to trigger other UI updates afterward.
python
self.datepicker = ft.DatePicker(
first_date=datetime.datetime.now(),
last_date=datetime.datetime(2027, 12, 31),
on_change=self.date_selected,
)

def date_selected(self, e):
# Trigger updates after DatePicker interaction
e.control.page.update()
Deferring UI actions using delays:

I introduced a small delay (e.g., 100ms) using time.sleep or await asyncio.sleep to ensure the DatePicker interaction had fully completed before proceeding to subsequent actions.
python
import time
def salvar_anotacao(e):
# After clearing fields
time.sleep(0.1)
e.page.snack_bar = ft.SnackBar(
ft.Text("Saved successfully!"), bgcolor="green", duration=3000
)
e.page.snack_bar.open = True
e.page.update()
Using callbacks for DatePicker completion:

I added a custom callback mechanism to the DatePicker component to detect when its interaction was complete, and only then executed subsequent UI actions.
python
def set_on_close_callback(self, callback):
self.on_close_callback = callback

Observations

The issue occurs consistently after interacting with the DatePicker.
It seems like the DatePicker leaves the UI in a "transitional" state, preventing other components (like SnackBar or Dialog) from behaving correctly.
Explicitly updating the page and adding delays slightly mitigate the problem but don’t fully resolve it.

Questions

Is there a known issue with the DatePicker in Flet that could cause this behavior?
Are there best practices to ensure the UI is fully "released" after using the DatePicker?
Is there a recommended way to synchronize DatePicker interactions with subsequent UI actions like opening a SnackBar or a Dialog?
Any insights or suggestions are greatly appreciated! Thank you in advance! 🚀

Code sample

import datetime
import flet as ft
from controllers.bd_connect import ConexaoBD
import time

class AnnotationForm(ConexaoBD):
    def __init__(self, cpf_cnpj, cooperado, origem, username):
        super().__init__()
        self.cpf_cnpj = cpf_cnpj
        self.cooperado = cooperado
        self.origem = origem
        self.gerente = username  

    def render(self):
        dropdown_meio = ft.Dropdown(
            label="Meio:",
            options=[
                ft.dropdown.Option("Agência"),
                ft.dropdown.Option("Visita"),
                ft.dropdown.Option("Ligação"),
                ft.dropdown.Option("Whatsapp"),
            ],
        )
        dropdown_oferta = ft.Dropdown(
            label="Oferta:",
            options=[
                ft.dropdown.Option("Oferta de Produtos"),
                ft.dropdown.Option("Oferta de Crédito"),
                ft.dropdown.Option("Cobrança"),
                ft.dropdown.Option("Relacionamento"),
            ],
        )
        dropdown_resultado = ft.Dropdown(
            label="Resultado:",
            options=[
                ft.dropdown.Option("Não atendeu"),
                ft.dropdown.Option("Não tem interesse"),
                ft.dropdown.Option("Aceitou"),
                ft.dropdown.Option("Agendado Visita"),
                ft.dropdown.Option("Agendado Ligação"),
                ft.dropdown.Option("Outro"),
            ],
        )

        # Substituí "date_picker" por "date_picker_component"
        date_picker_component = DatePickerComponent()
        anotacao_field = ft.TextField(label="Anotações:", multiline=True, height=120)

        salvar_button = ft.ElevatedButton("Salvar", icon=ft.icons.SAVE)

        def salvar_anotacao(e):
            # Define o valor de "concluido"
            concluido = 0 if dropdown_resultado.value in [
                "Agendado Visita",
                "Agendado Ligação",
                "Outro",
            ] else 1

            # Dados da anotação
            anotacao_data = {
                "cpf_cnpj": self.cpf_cnpj,
                "cooperado": self.cooperado,
                "gerente": self.gerente,
                "meio": dropdown_meio.value,
                "oferta": dropdown_oferta.value,
                "resultado": dropdown_resultado.value,
                "anotacao": anotacao_field.value,
                "data_agendada": (
                    date_picker_component.datepicker.value.strftime("%d-%m-%Y")
                    if date_picker_component.datepicker.value is not None
                    else None
                ),
                "data_contato": datetime.datetime.now().strftime("%d-%m-%Y"),
                "concluido": concluido,
                "origem": self.origem,
            }

            # Salvar a anotação no banco de dados
            try:
                cursor = self.conn.cursor()
                cursor.execute(
                    """
                    INSERT INTO anotacoes (
                        cpf_cnpj, cooperado, gerente, meio, oferta, resultado, anotacao, 
                        data_agendada, data_contato, concluido, origem
                    ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
                """,
                    (
                        anotacao_data["cpf_cnpj"],
                        anotacao_data["cooperado"],
                        anotacao_data["gerente"],
                        anotacao_data["meio"],
                        anotacao_data["oferta"],
                        anotacao_data["resultado"],
                        anotacao_data["anotacao"],
                        anotacao_data["data_agendada"],
                        anotacao_data["data_contato"],
                        anotacao_data["concluido"],
                        anotacao_data["origem"],
                    ),
                )
                self.conn.commit()

                # Limpar os campos
                e.control.page.update()
                dropdown_meio.value = None
                dropdown_oferta.value = None
                dropdown_resultado.value = None
                date_picker_component.datepicker.value = None
                anotacao_field.value = ""
                e.control.page.update()

                time.sleep(0.1)

                # Exibe o Snackbar
                e.page.snack_bar = ft.SnackBar(
                    ft.Text("Anotação salva com sucesso!", color="white"),
                    bgcolor="green",
                    duration=3000,  # Duração em milissegundos
                )
                e.page.snack_bar.open = True
                e.control.page.update()

                print("Anotação salva com sucesso!")
            except Exception as ex:
                print(f"Erro ao salvar anotação: {ex}")
                e.page.snack_bar = ft.SnackBar(
                    ft.Text(f"Erro ao salvar anotação: {ex}", color="white"),
                    bgcolor="red",
                    duration=3000,
                )
                e.page.snack_bar.open = True
                e.page.update()

        salvar_button.on_click = salvar_anotacao

        return ft.Column(
            controls=[
                dropdown_meio,
                dropdown_oferta,
                dropdown_resultado,
                date_picker_component.render(),  # Chama o método render()
                anotacao_field,
                salvar_button,
            ]
        )


class DatePickerComponent:
    def __init__(self):
        self.datepicker = ft.DatePicker(
            first_date=datetime.datetime.now(),
            last_date=datetime.datetime(2027, 12, 31),
            on_change=self.date_selected,  # Callback quando a data é selecionada
        )
        self.selected_date = ft.Text()
        self.on_close_callback = None  # Callback para ações pós-fechamento

    def date_selected(self, e):
        # Atualiza o valor selecionado
        self.selected_date.value = f"Data selecionada: {self.datepicker.value}"
        e.control.page.update()

        # Verifica se há um callback definido para pós-seleção
        if self.on_close_callback:
            self.on_close_callback(e)

    def set_on_close_callback(self, callback):
        """Define uma função para ser chamada após o DatePicker fechar."""
        self.on_close_callback = callback

    def open_date_picker(self, e):
        e.control.page.update()
        e.control.page.open(self.datepicker)

    def render(self, initial_visible=True):
        self.datepicker.visible = initial_visible
        return ft.Column(
            controls=[
                ft.ElevatedButton(
                    "Agendar data",
                    icon=ft.icons.CALENDAR_MONTH,
                    on_click=self.open_date_picker,
                ),
                self.datepicker,
                self.selected_date,
            ]
        )

Error message

No response

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.