A quick example for the new focus-implementation

The update New Icon Set, bug fixes and more … contained a change to the way the focus works. Before the Focus-State and Focus-events were only usable on one cell, which rendered them useless for textfield… Here a little example showing the automatic “Focus”-State (here a blue border), and the “Focus” and “Focus”-Out-Events (here we show some text while a textfield has the focus on textfields at the bottom:

focus.zip (215.8 KB)

1 Like

Can any widget receive focus? I have a list browser with some list items in it. On Mac, when one of the list items becomes selected, the entire list browser receives focus. I cannot get the list pane to understand that it should receive focus when something inside it gets clicked. In css, I would probably do this by using “focus-within” but how would I do it with Antetype?!

we already use focus-in but I suspect your list-items do not get the focus since they are only a DOM-Element without user interaction for the browser. What you need to do is setting the tabindex property-on the list-items. Here a small example:

focus.zip (255.2 KB)

  • The first list does not switch to the focus-state since the elements will never get the focus from the browser
  • The second list works out of the box, since editable text will always get the focus from the browser
  • The last list sets the the tabindex on load for all its children. If you click on one entry the container switches in the focus state. I think this is the behavior you need

This is it. Nice one. Thanks!