SearchBar stopped working

[mfxbe]

Duplicate Check

• [X] I have searched the opened issues and there are no duplicates

Describe the bug

With the update from Flet 0.22.1 to 0.23.X the SearchBar stopped working. The dropdown/list with results just doesn't open anymore. No error shown.

I've put a part of the code I'm using below but it also stopped working for me if I just follow the example from the docs.

Code

class ExtraSearchBar(ft.SearchBar):
	def __init__(self, hint, extras):
		super().__init__()
		self.extras = []
		self.lv = ft.ListView()

		self.extras = extras
		self.bar_bgcolor=ft.colors.BACKGROUND
		self.view_hint_text="Extras"
		self.bar_hint_text=hint
		self.controls=[self.lv]
		self.on_change=self.handle_change
		
		index = 0
		for i in self.stations:
			y = i["name"]
			self.lv.controls.append(ft.ListTile(title=ft.Text(f"{y}"), on_click=self.close_anchor, data=y))
			index = index + 1
			if index >= 30:
				break;

To reproduce

1. Use the SearchBar example from the docs
2. Run it & click on the searchbar
3. Searchbar gets focus but no "result" list is shown

Expected behavior

No response

Screenshots

No response

Operating System

Linux

Operating system details

Debian sid

Flet version

0.23.2

Regression

Yes, it used to work in a previous Flet version (please specify the version in additional details)

Suggestions

No response

Additional details

Worked in Flet 0.22.1

[ndonkoHenri]

Sorry for that, we forgot to mention a change in this Control. From now on, the dev (you) is responsible for opening the searchbar when it is pressed. (ref)

Briefly: you just need to call search_bar.open_view() in your on_tap event handler

Will update documentation code.

[mfxbe]

Thank you for your answer and the hint with the tab_handler. But I'm still not completely sure how I should solve it.

As you can see in the code example above I use a class to build a "widget" based on the SearchBar. If I put self.on_tap = self.open_view() in there it leads to the following issue:

AssertionError: Control must be added to the page first.

I would really prefer not to be forced to set up that event handler for each instance but I see no way to do that here. Am I missing something?

Update: For now I managed to bypass the problem by setting self.on_change = self.handle_change and adding this function within the class:

def handle_tap(self, _e):
	if self.page is not None:  self.open_view()

[ndonkoHenri]

adding this function within the class:

Yep! As I said, the only change is to call that method in the on_tap handler.

If I put self.on_tap = self.open_view() in there it leads to the following issue: AssertionError: Control must be added to the page first.

You are not doing it right, that's why it fails. You could have done it like this Instead: self.on_tap = lambda e: self.open_view(), or you create a method for the on_tap (handle_tap, as you did) and call open_view() in there.

[mfxbe]

Ah alright, I see. That's the right way to do it. So the only thing missing indeed is up-to-date documentation, no issues in code. Thanks again.

[fccoelho]

I am having the same AssertionError still, with Flet 0.27.6.

in my app, this is how the searchbar is defined:

    def handle_tap(e):
        page.city_search.open_view()

    # Initialize city search bar
    page.city_search = ft.SearchBar(
        bar_hint_text="Digite o nome da cidade",
        width=300,
        on_submit=lambda e: find_city(page, e.data),
        on_change=lambda e: find_city(page, e.data),
        on_tap = handle_tap,
        controls = [ft.ListTile(title=ft.Text(f"{city}"), on_click=lambda e: select_city(page, city) ) for city in page.city_names]
    )

    create_appbar(page, page.city_search, state_dropdown)

At first, it works, i.e., tapping opens the search view, but If I change views (by clicking on the navigation bar), I start getting the error, even though the new view uses the same appbar, containing the same searchbar.

Then, if I switch back to the original view, the searchbar's openview works again.

This is how the views are created:

def view_sua_cidade(page: ft.Page):
    return ft.View(
        appbar=page.appbar,
        controls=[
            ft.Text("Sua cidade", size=30),
            page.navigation_bar
            # Add more controls specific to "Sua cidade"
        ],
        scroll=ft.ScrollMode.AUTO
    )

appbar and navigation_bar are quite standard and created just like in the documentation.

[ndonkoHenri]

@fccoelho feel free to open a new issue providing a runnable/simple code repro to test.