I'm not totally satisfied with using x-focus for focus management, it falls short in some cases:
It sets focus after every request regardless of the response status: A UI might need to focus on one element after a successful request and a totally different element when there's an error.
Focusing elements via their ID doesn’t always work: When a new element is created through an AJAX request it may be impossible to assume what its ID will be.
It ignores autofocus: Alpine AJAX should respect this attribute since it's already browser-native.
It's worth noting that Alpine has a first party Focus plugin, it would be nice to have better support for those utilities.
x-autofocus to the rescue
This PR introduces a new x-autofocus attribute and deprecates x-focus. After an AJAX request is issued and content is merged on the page, the first element with the attribute x-autofocus, will be automatically focused. The same is true for the browser-standard autofocus attribute. The only difference between x-autofocus and autofocus is that x-autofocus does not trigger focus on initial page loads, only when AJAX content loads.
If multiple elements are targeted in an AJAX request each target is checked for an x-autofocus attribute in the order specified by x-target, so the first target containing an x-autofocus will receive focus.
The problem
I'm not totally satisfied with using
x-focusfor focus management, it falls short in some cases:autofocus: Alpine AJAX should respect this attribute since it's already browser-native.It's worth noting that Alpine has a first party Focus plugin, it would be nice to have better support for those utilities.
x-autofocusto the rescueThis PR introduces a new
x-autofocusattribute and deprecatesx-focus. After an AJAX request is issued and content is merged on the page, the first element with the attributex-autofocus, will be automatically focused. The same is true for the browser-standardautofocusattribute. The only difference betweenx-autofocusandautofocusis thatx-autofocusdoes not trigger focus on initial page loads, only when AJAX content loads.If multiple elements are targeted in an AJAX request each target is checked for an
x-autofocusattribute in the order specified byx-target, so the first target containing anx-autofocuswill receive focus.Fixes #52