Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Morph not enabled (idiomorph) #3205

Open
brianlow opened this issue Feb 22, 2025 · 3 comments
Open

Morph not enabled (idiomorph) #3205

brianlow opened this issue Feb 22, 2025 · 3 comments

Comments

@brianlow
Copy link

brianlow commented Feb 22, 2025 •
edited
Loading

I want to maintain text selection during periodic refresh of some HTML

Image

Breakpoints inside idiomorph.jsare not being hit (e.g. morph())

Minimal example

<html>

<head>
  <title>Test Morph</title>
  <script src="https://unpkg.com/[email protected]/dist/htmx.js" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/idiomorph/dist/idiomorph.js" crossorigin="anonymous"></script>
</head>

<body hx-ext="morph">

  <!-- periodically update the list -->
  <span hx-get="/example" hx-target="#piece-list" hx-trigger="every 500ms" hx-swap="morph:innerHTML">
  </span>

  <div id="piece-list"></div>

</body>
</html>

and the result from /example:

<div id="piece-1">Piece 1</div>
<div id="piece-2">Piece 2</div>
<div id="piece-3">Piece 3</div>

Any ideas?
@brianlow
Copy link
Author

swapOverride is not set on htmx:beforeSwap

document.addEventListener('htmx:beforeSwap', function (evt) {

  console.log("swapOverride", evt.detail.swapOverride); //  -> "swapOverride undefined"

  evt.detail.swapOverride = "morph:innerHTML"           // no effect

});

@MichaelWest22
Copy link
Contributor

You need to link to the idiomorph-ext.js file as this includes the htmx extension shim as well as the idiomorph library. What you have imported is just the idiomorph library on its own which you can only access via JS calls and not via htmx swaps. More detail in the idiomorph Readme.

You also might need to enable ignoreActive or ignoreActiveValue options to true or it may update the inputs value during morph breaking selection.

@brianlow
Copy link
Author

That was it, thank you!

The docs at https://htmx.org/extensions/idiomorph should perhaps mention the -ext file

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brianlow @MichaelWest22