When to handle a keypress?

[jsholmes]

Hi there. I've got an app with a main component that contains a bunch of subcomponents. The main component wants to display a help dialog when the user hits h or ?. This works great, but there are also some text input boxes where the user can legitimately type words that contain h, like there. Right now as soon as the user hits the h in "there", the help dialog pops up.

How can the MainComponent know that some great-grandchild input component of it has Focus for input?

[ArthurSonzogni]

I think you could create a CatchEvent class that will first ask for the children.

This is similar to:
https://github.com/ArthurSonzogni/FTXUI/blob/master/src/ftxui/component/catch_event.cpp
but, we invert instructions in CatchEventBase2::OnEvent(...)

class CatchEventBase2 : public ComponentBase {
 public:
  // Constructor.
  explicit CatchEventBase2(std::function<bool(Event)> on_event)
      : on_event_(std::move(on_event)) {}

  // Component implementation.
  bool OnEvent(Event event) override {
    if (ComponentBase2:OnEvent(event)) {
      return true;
    } else {
      return on_event_(event)
    }
  }

 protected:
  std::function<bool(Event)> on_event_;
};

Component CatchEvent2(Component child,
                     std::function<bool(Event event)> on_event) {
  auto out = Make<CatchEventBase2>(std::move(on_event));
  out->Add(std::move(child));
  return out;
}

ComponentDecorator CatchEvent2(std::function<bool(Event)> on_event) {
  return [on_event = std::move(on_event)](Component child) {
    return CatchEvent2(std::move(child), [on_event = on_event](Event event) {
      return on_event(std::move(event));
    });
  };
}

[jsholmes]

I wonder if maybe this is a better order to CatchEvent in by default? It seems less surprising that if a child reports it handles the event, the parent won't have to process it.

But either way, I'll just add a policy to CatchEventBase that lets the user pick the order it catches in. (Though I would suggest the default be the opposite for least surprise, but maybe I'm wrong?)

[jsholmes]

@ArthurSonzogni , a sort of related question:

Is it possible for a component to Unfocus/YieldFocus itself in its OnEvent handler? For instance, I have a data table with rows. The user can select rows with arrow keys or the mouse. If they do, the table does TakeFocus(). If it is Focused(), then its Render() call, it shows a section with details about the row at the bottom.

When the user hits ESC, I'd like to stop showing the details at the bottom and in order to do that, unfocus the table.

[ArthurSonzogni]

Component have children components. One of them is the "active child".

So ComponentBase::Active() is implemented by:

FTXUI/src/ftxui/component/component.cpp

Lines 149 to 151 in ef0f1da

	bool ComponentBase::Active() const {
	return parent_ == nullptr || parent_->ActiveChild().get() == this;
	}

If you start from the root and follow all the active child. You reached all the "Focused()" ones.
So Focused() is implemented by:

FTXUI/src/ftxui/component/component.cpp

Lines 158 to 164 in ef0f1da

	bool ComponentBase::Focused() const {
	const auto* current = this;
	while (current && current->Active()) {
	current = current->parent_;
	}
	return !current && Focusable();
	}

Only one leaf component can be "Focused" at the same time. It represents where the users is on the screen. When A component is Focused, all of its parents are focused.

[jsholmes]

Ah ok. So to TakeFocus from one child, the parent has to focus some other leaf child. There cannot be just no focused component once anything has ever been focused?

[jsholmes]

And in fact, because of the way _selector and selected are initialized, the leaf child along the 0th branch of every parent is Focused when the app starts, right?

[ArthurSonzogni]

Yes, the user needs to be somewhere.

Technically, you could create some container supporting being active, without any active child. The user would be "on" the container, without being on any specific children. Then you could goes into this state using: Parent()->SetActiveChild(nullptr).

However, FTXUI do not support any component like this. We only expose "Container::Horizontal" & etc implemented by:

FTXUI/src/ftxui/component/container.cpp

Lines 50 to 57 in ef0f1da

	void SetActiveChild(ComponentBase* child) override {
	for (size_t i = 0; i < children_.size(); ++i) {
	if (children_[i].get() == child) {
	*selector_ = (int)i;
	return;
	}
	}
	}

FTXUI/src/ftxui/component/container.cpp

Lines 42 to 48 in aebde94

	Component ActiveChild() override {
	if (children_.empty()) {
	return nullptr;
	}
	return children_[*selector_ % children_.size()];
	}

which do not support having no active children.

So, I would say no.

[jsholmes]

Ok. I'll just define some ordering of the leaf components and make the 0th one the one I focus on when Esc is pressed. Thanks for the help!