Is there a way to display default key bindings in the footer that are normally hidden?

[jessebot]

Hi textual team! I hope you're well, as I love your projects so very much! They've made 🐍 cli/tui work so wonderful 💙 💛

Is there a way to display the default key bindings at all?

I haven't really assigned new ones, outside of q to quit, but I do want to show new users about default textual key bindings. An example would be explaining that tab allows you to focus onto the next area. When adding this to the footer, it only displays the q to quit text in the footer, but none of the other keys. Here's a snippet:

#!/usr/bin/env python3.11
from textual import on
from textual.app import App, ComposeResult
from textual.containers import VerticalScroll, Container, Horizontal, HorizontalScroll
from textual.binding import Binding
from textual.events import Mount
from textual.widgets import Button, Footer, Header, Input, Label, RadioButton, RadioSet, Rule, SelectionList, Static, Switch, TabbedContent, TabPane
from textual.widgets.selection_list import Selection


class ConfigureAll(App):
    """
    class helps the user configure specific custom values for applications such
    as hostnames and timezones
    """
    CSS_PATH = "./css/configure_all.tcss"
    BINDINGS = [
        Binding(key="tab",
                action="focus_next",
                description="Focus Next",
                show=True,
                priority=True),
        Binding(key="shift+tab",
                action="focus_previous",
                description="Focus Previous",
                show=True,
                priority=True),
        Binding(key="q",
                key_display="q",
                action="quit",
                description="Quit smol-k8s-lab"),
        Binding("left", "previous_tab", "Previous tab", show=True, priority=True),
        Binding("right", "next_tab", "Next tab", show=True, priority=True)
    ]

    def compose(self) -> ComposeResult:
        """
        Compose app with tabbed content.
        """
        header = Header()
        header.tall = True
        yield header
        # Footer to show keys
        yield Footer()

I read about bindings here, https://textual.textualize.io/guide/input/#binding-class :

The footer widget can inspect bindings to display available keys. If you don't want a binding to display in the footer you can set show=False. The default bindings on App do this so that the standard Ctrl+C, Tab and Shift+Tab bindings don't typically appear in the footer.

Is there some way to ensure certain default bindings do appear in the footer? Is there a hidden option to make it work anyway?

Here's an example of what currently happens:
https://github.com/Textualize/textual/assets/2389292/60048493-992e-4c6d-b1e3-956b4cdca467

If you notice, at roughly 3 seconds into the video, the other bindings, aside from the quit binding, do show up, before being hidden again immediately.

I don't know if it's helpful, but you can view the whole file of code I'm writing with @cloudymax here (we're actively working on it, so I've pinned it to a specific commit):
https://github.com/small-hack/smol-k8s-lab/blob/9f18ad3a2c31e5c18e14c937431401d128b3e690/smol_k8s_lab/utils/tui/configure_all.py

We're using Python 3.11.4 and textual 0.36.0.

I found these issues, but I am still confused:
#2100 (comment)
#2331
#2332

Is the issue that nested in my tabbed content further down in the file, I have scrolling containers? I need those for now, I think, unless I'm missing something, which could absolutely be the case. Is there a work around or am I doing something wrong?

[davep]

Is there a hidden option to make it work anyway?

No, there isn't a hidden option for this (we don't really have "hidden options" -- internals that may change from release to release and can't be relied on, sure, but not stable hidden options; if something is a stable option we'll generally publish it in the docs).

When it comes to the usual navigation keys, as you've noticed, there isn't really a method of getting them to show in the Footer if they're configured to not show. One of the reasons for this is that, quite quickly, the Footer would get overwhelmed with keys and many would disappear off the edge of the footer and the user wouldn't be able to see them.

Our aim is to revisit the way that users can discover bindings, either via the Footer or some other method, but there's no firm plans yet.

In your case I think, for your app, if your users need to be able to learn the basic navigation keys, perhaps it makes more sense to have a ModalScreen help screen, bind F1 to show it, and then F1 Help will show in the footer so a user can look in on that at any time. It'll also give you a lot more space to describe the bindings they need to know.

[jessebot]

No, there isn't a hidden option for this (we don't really have "hidden options" -- internals that may change from release to release and can't be relied on, sure, but not stable hidden options; if something is a stable option we'll generally publish it in the docs).

I appreciate that :) 💙

I totally missed ModelScreen (guide: modal-screens) in the docs before, and this works for my use cases. Thanks for such a prompt and thorough response!

[shuckc]

It's not very clean, but you can subclass Footer and remove the filter.:

from typing import Optional, List
from collections import defaultdict

from rich.text import Text
from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.containers import ScrollableContainer
from textual.widgets import Footer, Header, Label


class MyFooter(Footer):
    def _make_key_text(self) -> Text:
        """Create text containing all the keys."""
        base_style = self.rich_style
        text = Text(
            style=self.rich_style,
            no_wrap=True,
            overflow="ellipsis",
            justify="left",
            end="",
        )
        highlight_style = self.get_component_rich_style("footer--highlight")
        highlight_key_style = self.get_component_rich_style("footer--highlight-key")
        key_style = self.get_component_rich_style("footer--key")
        description_style = self.get_component_rich_style("footer--description")

        bindings = [
            binding
            for (_, binding) in self.app.namespace_bindings.values()
    ###         if binding.show    <--- removed here
        ]

        action_to_bindings = defaultdict(list)
        for binding in bindings:
            action_to_bindings[binding.action].append(binding)

        for _, bindings in action_to_bindings.items():
            binding = bindings[0]
            if binding.key_display is None:
                key_display = self.app.get_key_display(binding.key)
                if key_display is None:
                    key_display = binding.key.upper()
            else:
                key_display = binding.key_display
            hovered = self.highlight_key == binding.key
            key_text = Text.assemble(
                (f" {key_display} ", highlight_key_style if hovered else key_style),
                (
                    f" {binding.description} ",
                    highlight_style if hovered else base_style + description_style,
                ),
                meta={
                    "@click": f"app.check_bindings('{binding.key}')",
                    "key": binding.key,
                },
            )
            text.append_text(key_text)
        return text


class SillyApp(App):
    BINDINGS = [
        ("l", "load_preset", "Load preset"),
    ]
    def compose(self) -> ComposeResult:
        """Create child widgets for the app."""
        yield Header()
        yield MyFooter()
        yield ScrollableContainer(Label("hello world"))

    def action_load_preset(self) -> None:
        pass

if __name__ == "__main__":
    app = SillyApp()
    app.run()

It would be nice if Footer had a get_bindings method we could override:

class Footer:
    ...
    bindings = self.get_bindings()
    ...
    def get_bindings(self):
      return [
           binding
           for (_, binding) in self.app.namespace_bindings.values()
       ]