Merge pull request #760 from zacheryph/fix/lifecycle-callback-ordering

brunoprietog · web-flow · commit 222e6437f953 · 2025-03-27T06:59:47.000+01:00
Fix Inconsistency with Callback Ordering (#759)
diff --git a/docs/reference/lifecycle_callbacks.md b/docs/reference/lifecycle_callbacks.md
@@ -71,7 +71,7 @@ A connected target will later become _disconnected_ when either of the preceding
 * the element's `data-{identifier}-target` attribute is removed or modified
 * the document installs a new `<body>` element, such as during a Turbo page change
 
-When a target becomes disconnected, Stimulus calls its controller's `[name]TargetDisconnected()` method, passing the target element as a parameter. The `[name]TargetDisconnected()` lifecycle callbacks will fire *before* the controller's `disconnect()` callback.
+When a target becomes disconnected, Stimulus calls its controller's `[name]TargetDisconnected()` method, passing the target element as a parameter. The `[name]TargetDisconnected()` lifecycle callbacks will fire *after* the controller's `disconnect()` callback.
 
 ## Reconnection
 
diff --git a/docs/reference/targets.md b/docs/reference/targets.md
@@ -95,7 +95,7 @@ removed within the controller's element.
 
 Define a method `[name]TargetConnected` or `[name]TargetDisconnected` in the controller, where `[name]` is the name of the target you want to observe for additions or removals. The method receives the element as the first argument.
 
-Stimulus invokes each element callback any time its target elements are added or removed after `connect()` and before `disconnect()` lifecycle hooks.
+Stimulus invokes each element callback any time its target elements are added or removed. When the controller is connected or disconnected from the document, these callbacks are invoked *before* `connect()` and *after* `disconnect()` lifecycle hooks.
 
 ```js
 export default class extends Controller {
@@ -130,6 +130,6 @@ Always use camelCase to specify target names, since they map directly to propert
 
 ```js
 export default class extends Controller {
-  static targets = [ "camelCase" ]  
+  static targets = [ "camelCase" ]
 }
 ```
