# How to Focus the tui-logger Widget on a Specific Target Using the 'f' Key

> Learn to focus the tui-logger widget on a specific target using the f key command. Isolate and highlight targets for better log visibility and debugging in your terminal applications.

- Repository: [gin66/tui-logger](https://github.com/gin66/tui-logger)
- Tags: how-to-guide
- Published: 2026-03-02

---

**Pressing `f` toggles focus mode in the tui-logger widget, isolating the currently selected target by highlighting it with `style_show` while dimming all others with `style_hide` via the `focus_selected` state flag.**

The `tui-logger` crate provides a terminal user interface widget for filtering and displaying log output in Rust applications built with `tui-rs` or `ratatui`. When managing multiple log targets, isolating a specific target visually helps track relevant messages. This guide explains the exact mechanism behind the **`f`** key command as implemented in the `gin66/tui-logger` repository.

## What the Focus Command Does

When you press **`f`**, the widget enters focus mode for the target list. In this state, the currently selected target renders with the active style (`style_show`), while all other targets render with the inactive style (`style_hide`). This visual distinction makes it immediately obvious which target you are manipulating. The same focus state propagates to the log view widget to maintain consistent filtering behavior across the entire interface.

## How the 'f' Key Controls the Focus State

The implementation spans four key files in the codebase, handling everything from keyboard input to final rendering.

### Event Handling in the Demo

In [`examples/demo.rs`](https://github.com/gin66/tui-logger/blob/main/examples/demo.rs), the demonstration application maps the physical **`f`** key to the `FocusKey` event variant:

```rust
match key {
    // ... other key handling ...
    Key::Char('f') => state.transition(TuiWidgetEvent::FocusKey),
    _ => (),
}

```

This calls `transition()` on the widget state, passing the specific event type that triggers the focus toggle.

### State Transition Logic

The state machine processes the event in [`src/widget/inner.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/inner.rs). When the code matches `TuiWidgetEvent::FocusKey`, it flips the `focus_selected` boolean using XOR assignment:

```rust
match event {
    // ...
    FocusKey => {
        self.focus_selected ^= true;
    }
    // ...
}

```

This toggles the flag between `true` and `false` on each keypress, tracking whether focus mode is currently active.

### Target Rendering Logic

The [`src/widget/target.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/target.rs) file checks this flag during the draw loop to determine cell styling. The rendering logic evaluates both the focus state and the current selection index:

```rust
let cell_style = if hot_level_filter >= *lev {
    if level_filter >= *lev {
        if !focus_selected || i + offset == state.selected {
            self.style_show    // Highlighted
        } else {
            self.style_hide    // Dimmed when focus is on
        }
    } else {
        self.style_hide
    }
} else {
    // ...
};

```

When `focus_selected` is `true`, only the line where `i + offset == state.selected` receives the highlighted style. All other targets render with the dimmed style, effectively hiding them from view.

### Log View Synchronization

The standard log view in [`src/widget/standard.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/standard.rs) also respects the `focus_selected` flag. The widget checks this state at lines 254-256 to decide whether to apply skip logic when drawing log lines, ensuring that the focus experience remains consistent between the target list and the actual log output.

## Implementing the Focus Key in Your Application

To enable this functionality, map the **`f`** key (or any preferred key) to emit `TuiWidgetEvent::FocusKey` in your event loop:

```rust
use tui_logger::TuiWidgetEvent;

// Inside your event handling code
match key {
    Key::Char('f') => {
        state.transition(TuiWidgetEvent::FocusKey);
    }
    // ... handle other inputs ...
}

```

The widget handles the state management and rendering automatically. Each press of **`f`** toggles between showing all targets and showing only the focused target.

## Summary

- **Toggle mechanism**: Press **`f`** to switch between normal and focus modes by emitting `TuiWidgetEvent::FocusKey`
- **State tracking**: The `focus_selected` boolean in `TuiWidgetInnerState` (defined in [`src/widget/inner.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/inner.rs)) tracks the current mode
- **Visual filtering**: In [`src/widget/target.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/target.rs), targets render with `style_show` only if `!focus_selected` or if they match the current selection index
- **Cross-widget consistency**: [`src/widget/standard.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/standard.rs) uses the same flag to filter log lines, keeping the display synchronized
- **Simple integration**: You only need to map a key to `TuiWidgetEvent::FocusKey` in your application code; the crate handles the rest

## Frequently Asked Questions

### What visual changes occur when focus mode is active?

When focus mode is active, the currently selected target appears highlighted using the widget's `style_show` style, while all other targets render with the `style_hide` style. This creates a high-contrast visual that isolates your selection from the rest of the target list, making it easier to identify which module you are monitoring.

### Does focus mode affect which log lines are displayed?

Yes. According to the source code in [`src/widget/standard.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/standard.rs), the `focus_selected` flag influences the log view's rendering logic at lines 254-256. When focus mode is enabled, the widget applies skip logic to filter log lines, ensuring that the log display remains consistent with the focused target shown in the target list widget.

### How do I exit focus mode once activated?

Press **`f`** again. The implementation uses XOR assignment (`focus_selected ^= true`) in [`src/widget/inner.rs`](https://github.com/gin66/tui-logger/blob/main/src/widget/inner.rs), which means each press of the **`f`** key toggles the boolean state. Pressing it once enables focus mode; pressing it a second time returns the widget to normal viewing mode where all targets are visible.

### Can I customize the key binding for focus mode?

Yes. The key binding is defined in your application's event loop, not inside the widget itself. The demo in [`examples/demo.rs`](https://github.com/gin66/tui-logger/blob/main/examples/demo.rs) uses `Key::Char('f')`, but you can map any key or input event to `TuiWidgetEvent::FocusKey` when calling `state.transition()`. This allows you to use a different key or even a mouse click to toggle focus mode.