set focus at some input field after component update?

[nerdoc]

In a component with 2 inputs and a button, I want to place the cursor into the first input field each time after an update is triggered. Is that possible with Unicorn (yet?) - the 'autofocus' html attr only works on the first page load.

[adamghill]

https://www.django-unicorn.com/docs/advanced/#javascript-integration is a little limited because it expects a JavaScript function available to call, but I think this should be possible with something like:

class CallJavascriptView(UnicornView):
    def do_something(self):
        # do some things
        self.call("focus")

function focus() {
  document.getElementById("someTextField").focus();
}

This seems like a pretty typical thing to do, would it be useful to have a nicer API from the component view side so that the custom JavaScript isn't necessary?

[nerdoc]

Definitely. Have a look at django-reactor where the components provide a :focus attribute to keep the focus after a component update.

Of course, if 2 components in a page have this attribute, it's undefined and you maybe'll gett trouble, but OTOH, if you shoot yourself in the foot, you get pain. So just don't do it 😇

[nerdoc]

it's not more than a

@querySelector('[\\:focus]:not([disabled])')?.focus()

in any javascript-side post-update-event trigger, if there is any in Unicorn?