htmx icon indicating copy to clipboard operation
htmx copied to clipboard

docs: fix `this` binding in `onClick .then` handler with arrow function

Open lloydlobo opened this issue 1 year ago • 0 comments

Description

Please describe what changes you made, and why you feel they are necessary. Make sure to include code examples, where applicable.

What

Update the .then() handler in the onClick attribute to use an arrow function instead of a traditional function(arg) expression.

Why

The window scope was being accessed instead of the intended button. This fixes the this binding within the lexical scope, ensuring that this is bound to the button instead of the window and resolving the issue.

Corresponding issue: #2257

Testing

Please explain how you tested this change manually, and, if applicable, what new tests you added. If you're making a change to just the website, you can omit this section.

Preview

The GIF demonstrates that clicking the button logs this to the console. The change ensures correct this binding, logging the specific button instead of the window.

if (result.isConfirmed) {
    console.log(this);
    htmx.trigger(this, 'confirmed');
}

Animation_htmx_arrow_fn

Checklist

  • [x] I have read the contribution guidelines
  • [x] I have targeted this PR against the correct branch (master for website changes, dev for source changes)
  • [x] This is either a bugfix, a documentation update, or a new feature that has been explicitly approved via an issue
  • [ ] I ran the test suite locally (npm run test) and verified that it succeeded

lloydlobo avatar Mar 04 '24 04:03 lloydlobo