Reproduce:

python3 -mvenv python
source python/bin/activate
pip install textual==0.12.1
python git/textual/examples/calculator.py # it works!
pip install textual-autocomplete
python git/textual/examples/calculator.py # sad face

Looks like it may have broken all widget with the new context manager feature?

Awesome library, thanks for this. It's s real game changer for turning Textual apps into productivity boosters :-)

I have a screen where 4 or 5 of these are rendered in a container. The screen is a CRUD-style update screen, and when the screen is pushed to the stack each input's value is then updated with the value from the data. The values may or may not match exactly a completion DropdownItem though I think this is irrelevant.

Updating the value of the inputs causes the dropdowns to pop up even when those inputs have no focus, resulting in a screen full of dropdowns.

I think I've found the bug so will open a PR.

how can we re-enable it need multi dropdown

Textual 0.11.0 had breaking changes:

• Removed reactive.watch in favor of DOMNode.watch
• Removed emit_no_wait, to be replaced with post_message_no_wait

Making those adjustments seems to get it working again - some simple touch testing at least.

When there are more than one Autocomplete items in an App, is there a way to handle events only for the item that caused the event?

Currently, from within handler on_auto_complete_selected(self, event) I think there is no way to distinguish from which item the event was caused and take appropriate action, because the event itself does not contain such information.

So, all my autocomplete items will have the same event handling, but that is something that might not be the desired behavior.

Greetings!

I'm trying to run the examples for the latest version of textual/textual-autocomplete, but have been unable to get the menus to render as expected.

When attempting to run either of the demos, I get a usable input field and tab completion appears to work, but the autocomplete options are never shown:

This is on Arch / kitty / zsh. I tried a few other terminals, just in case (Alacritty, xterm, urxvt), but no luck. Same result in Bash/ZSH.

I also tried installing textual in a clean conda environment and running the examples from there with the same result.

I tried running the tests for textual, and there are a few errors there, but none that are obviously related to the autocomplete issue:

========================================================= short test summary info ==========================================================
ERROR tests/devtools/test_devtools.py::test_devtools_valid_client_log
ERROR tests/devtools/test_devtools.py::test_devtools_string_not_json_message
ERROR tests/devtools/test_devtools.py::test_devtools_invalid_json_message
ERROR tests/devtools/test_devtools.py::test_devtools_spillover_message
ERROR tests/devtools/test_devtools.py::test_devtools_console_size_change
ERROR tests/devtools/test_devtools_client.py::test_devtools_client_is_connected
ERROR tests/devtools/test_devtools_client.py::test_devtools_log_places_encodes_and_queues_message
ERROR tests/devtools/test_devtools_client.py::test_devtools_log_places_encodes_and_queues_many_logs_as_string
ERROR tests/devtools/test_devtools_client.py::test_devtools_log_spillover
ERROR tests/devtools/test_devtools_client.py::test_devtools_client_update_console_dimensions
ERROR tests/devtools/test_redirect_output.py::test_print_redirect_to_devtools_only
ERROR tests/devtools/test_redirect_output.py::test_print_redirect_to_logfile_only
ERROR tests/devtools/test_redirect_output.py::test_print_redirect_to_devtools_and_logfile
ERROR tests/devtools/test_redirect_output.py::test_print_without_flush_not_sent_to_devtools
ERROR tests/devtools/test_redirect_output.py::test_print_forced_flush_sent_to_devtools
ERROR tests/devtools/test_redirect_output.py::test_print_multiple_args_batched_as_one_log
ERROR tests/devtools/test_redirect_output.py::test_print_strings_containing_newline_flushed
ERROR tests/devtools/test_redirect_output.py::test_flush_flushes_buffered_logs
===================================== 699 passed, 1 skipped, 4 xfailed, 1 warning, 18 errors in 18.13s =======

I had a friend check on another machine (also Arch), and the demos worked fine for him, so it's something about my setup that autocomplete is not liking.

Any ideas what the issue might be or how I can get more information to localize the problem?

I'm excited to see your work on this though! A solid autocomplete is something TUI frameworks have been sorely missing.

Cheers,
Keith

System info

• Arch Linux
• Python 3.10.9
• textual 0.8.1
• textual-autocomplete 3a20f09
• zsh 5.9
• kitty 0.26.5

This should be:

    # Favour items that start with the Input value, pull them to the top
    ordered = sorted(matches, key=lambda v: v.main.plain.lower().startswith(input_state.value.lower()), reverse=True)

or:

    # Favour items that start with the Input value, pull them to the top
    ordered = sorted(matches, key=lambda v: not v.main.plain.lower().startswith(input_state.value.lower()))

You might not have noticed the negative affect of the sort being backwards because of the missing lowercasing (a bug hiding a bug).

As a side note, I created a bug myself when extending the code to use two sequential sorts:

    # Only keep matches that contain the Input value as a substring
    matches = [c for c in items if input_state.value.lower() in c.main.plain.lower() + c.right_meta.plain.lower()]
    # Favour items that start with the Input value, pull them to the top
    # Keywords starting with the Input value are less important than the main text starting with it,
    # so sort by the more important criteria last.
    ordered = sorted(matches, key=lambda v: v.right_meta.plain.lower().startswith(input_state.value.lower()), reverse=True)
    ordered = sorted(matches, key=lambda v: v.main.plain.lower().startswith(input_state.value.lower()), reverse=True)

    return ordered

The second sort failed because when I copied the line of code I was still passing the original matches but it would need to be passed ordered. If it used just one variable (matches) I wouldn't have run into this problem:

    # Only keep matches that contain the Input value as a substring
    matches = [c for c in items if input_state.value.lower() in c.main.plain.lower() + c.right_meta.plain.lower()]
    # Favour items that start with the Input value, pull them to the top
    # Keywords starting with the Input value are less important than the main text starting with it,
    # so sort by the more important criteria last.
    matches = sorted(matches, key=lambda v: v.right_meta.plain.lower().startswith(input_state.value.lower()), reverse=True)
    matches = sorted(matches, key=lambda v: v.main.plain.lower().startswith(input_state.value.lower()), reverse=True)

    return matches

(And it doesn't make sense to have matches, partially_ordered, ordered; imagine trying to keep that up!)
So it could make the example slightly more malleable. Just a little tweak that I would recommend.

For compliance many organizations are not allowed to use software that is unlicensed

It would be nice to be able to select dropdown items with the mouse. Currently this does nothing.

Is there an existing issue for this?

• I have searched the open issues

Description of the bug

After upgrading to the latest version of textual-autocomplete 2.1.0b0, the AutoComplete input no longer displays if inside a Static widget.

I think I'm right in thinking that Static is a "base" widget in Textual, so likely other similar issues but I've only just started testing with this new version.

To Reproduce

# location_search.py

from textual.app import ComposeResult
from textual.widgets import Input, Static
from textual_autocomplete import AutoComplete, Dropdown, DropdownItem

ITEMS = [
    DropdownItem("Glasgow"),
    DropdownItem("Edinburgh"),
    DropdownItem("Aberdeen"),
    DropdownItem("Dundee"),
]


class LocationSearch(Static):
    def on_mount(self) -> None:
        self.query_one(Input).focus()

    def compose(self) -> ComposeResult:
        yield AutoComplete(
            Input(placeholder="Search for a location"),
            Dropdown(items=ITEMS),
        )

# locations_app.py

from textual.app import App, ComposeResult
from textual.containers import Container
from textual.widgets import Footer, Input, Markdown

from location_search import LocationSearch


class LocationsApp(App):
    def on_mount(self) -> None:
        self.query_one(Input).focus()

    def compose(self) -> ComposeResult:
        with Container():
            yield Markdown("# Find a location")
            yield LocationSearch()
        yield Footer()

I'm not sure if "Grouped Autocomplete" is an actual term, it might be something I'm making up.

The end goal would be to have different sets of autocomplete based on the placement in the input box. In my mind I'm thinking of 3 groups: object, verb and query. Each separated by a space character.

For this example, I imagine a Textual input box expecting input in the order: [object] [verb] [query]

Where as you type in the input box you start typing the first few letters of the 'object' and the only AutoComplete options shown are those in the list of 'objects'. You can continue typing or accept one of the autocomplete suggestions.

You add a space character and start typing again to begin the 'verb' and again as you begin the first few characters the only AutoComplete options shown are those from the 'verb' list.

After accepting an AutoComplete suggestion for the 'verb' you input a space character and begin typing the final item a 'query'. Again, as you get a few characters in the only AutoComplete items shown are those in the 'query' list.

I'm not quiet sure how to pull this off or if textual-autocomplete is the right module for the job. What are your thoughts?

Hi @darrenburns, first of all I find your plugin very useful and wanted to ask if there are any plans to include textual-autocomplete in the Textual library itself? Unfortunately, I don't see such a widget on the roadmap but maybe you have some thoughts because I know that you contribute to textual itself.

The second thing and the very reason for this issue that I wanted to raise - it's the lack of ability to decide whether the hint will appear at the top or at the bottom. My use case looks like this: at the very bottom of the screen there is a small one-line console to which I would like to attach autocomplete (this console is very similar to one of your applications - kupo).

Unfortunately, due to the lack of a choice to make it appear at the top, I am a bit unable to apply it to this layout.

I saw in the code that you predicted such a possibility. e.g:

# edge: Whether the dropdown should appear above or below.

But I think the best way would be to do it dynamically (check if it could be displayed below and if not, do it above)

I wanted to ask if you anticipate introducing this maybe in the near future? Or do you have any hint where to look to add something like this (maybe via PR)?

If the terminal is small enough that the max number of items doesn't fit on screen, the bottom of the dropdown is cut off, making the the bottom of the scrollbar and the last few items inaccessible.

Screencast:

Also the scrollbar appears to be half-width, probably cut off horizontally. (Maybe it the scrollbar width should be subtracted?)

I guess this project predates the overlay and constrain styles added in Textual 0.24.0 and could benefit from them, although they're still undocumented.

I want to remove the spacing between the left_meta column's content and the main column:

(It's also distracting having the columns resize as you type, and on wider terminals, the spacing gets worse.)

This could work something like:

.autocomplete--left-column {
    width: 3;
}

using self.parent.get_component_styles("autocomplete--left-column").width.
What all styles should be supported, and whether this opens up a can of worms, I can't say.

I would also like to position the dropdown flush with the left of the input, since it will be suggesting whole input values, not substrings to be concatenated with the current input value.
I don't have a strong opinion on how this should be specified (CSS or Python API), but the following doesn't work:

Dropdown {
    margin-left: 0 !important;
}

Unlike in the browser, !important can't beat an inline style.