Exclude `document.body` when morphing with `ignoreActiveValue: true` #34

seanpdoyle · 2024-01-25T15:47:13Z

When morphing with ignoreActiveValue: true, the <body> element and its children (that is, the entire document) can be preserved if no other element has focus.

Its common in some browsers (for example, Safari) to return document.body from document.activeElement when no other element has focus.

This commit incorporates that condition into the
ignoreValueOfActiveElement() predicate function.

When morphing with `ignoreActiveValue: true`, the `<body>` element and its children (that is, the entire document) can be preserved if no other element has focus. Its common in some browsers (for example, Safari) to return `document.body` from `document.activeElement` when no other element has focus. This commit incorporates that condition into the `ignoreValueOfActiveElement()` predicate function.

Morph with the [ignoreActiveValue: true][] option to morph the currently focused element's attributes, but preserve its value. This behavior can be extremely helpful when paired with an auto-submitting `<form>` element, like a typeahead `[role="combobox"]`, or an auto-submitting [`<input type="search">`][search]. This commit depends on a fork of `idiomorph` that [fixes a bug related to `ignoreActiveValue: true`][bigskysoftware/idiomorph#34]. [ignoreActiveValue: true]: https://github.com/bigskysoftware/idiomorph#options [search]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search [bigskysoftware/idiomorph#34]: bigskysoftware/idiomorph#34

seanpdoyle · 2024-01-25T16:02:28Z

test/core.js

+    it('does not ignore body when ignoreActiveValue is true and no element has focus', function()
+    {
+        let parent = make("<div><input value='foo'></div>");
+        document.body.append(parent);
+
+        let initial = parent.querySelector("input");
+
+        // morph
+        let finalSrc = '<input value="bar">';
+        Idiomorph.morph(initial, finalSrc, {morphStyle:'outerHTML'});
+        initial.outerHTML.should.equal('<input value="bar">');
+
+        document.activeElement.should.equal(initial);
+
+        let finalSrc2 = '<input class="foo" value="doh">';
+        Idiomorph.morph(initial, finalSrc2, {morphStyle:'outerHTML', ignoreActiveValue: true});
+        initial.value.should.equal('doh');
+        initial.classList.value.should.equal('foo');
+
+        document.body.removeChild(parent);
+    });
+


@1cg I wasn't able to execute the test suite locally. I've copied this test body from the one that precedes it, and have removed the call to .focus(). Does that feel sufficient?

I noticed that this project doesn't have CI. Are you able to execute this test in your working test harness?

Morph with the [ignoreActiveValue: true][] option to morph the currently focused element's attributes, but preserve its value. This behavior can be extremely helpful when paired with an auto-submitting `<form>` element, like a typeahead `[role="combobox"]`, or an auto-submitting [`<input type="search">`][search]. This commit depends on a fork of `idiomorph` that [fixes a bug related to `ignoreActiveValue: true`][bigskysoftware/idiomorph#34]. [ignoreActiveValue: true]: https://github.com/bigskysoftware/idiomorph#options [search]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search [bigskysoftware/idiomorph#34]: bigskysoftware/idiomorph#34

* Morph with `ignoreActiveValue: true` Morph with the [ignoreActiveValue: true][] option to morph the currently focused element's attributes, but preserve its value. This behavior can be extremely helpful when paired with an auto-submitting `<form>` element, like a typeahead `[role="combobox"]`, or an auto-submitting [`<input type="search">`][search]. This commit depends on a fork of `idiomorph` that [fixes a bug related to `ignoreActiveValue: true`][bigskysoftware/idiomorph#34]. [ignoreActiveValue: true]: https://github.com/bigskysoftware/idiomorph#options [search]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search [bigskysoftware/idiomorph#34]: bigskysoftware/idiomorph#34 * Depend on latest `idiomorph`

Follow-up to [bigskysoftware#34][] As mentioned in a [comment on bigskysoftware#34][], the test suite wasn't executed when the code was initially contributed. When opening `test/index.html` locally in a browser, there is a single test failure: ``` does not ignore body when ignoreActiveValue is true and no element has focus ‣ AssertionError: expected <body …(1)>…(28)</body> to equal <input value="bar"></input>@[native code] ``` This commit resolves that failure by changing the test to more accurately exercise the desired behavior. [bigskysoftware#34]: bigskysoftware#34 [comment on bigskysoftware#34]: bigskysoftware#34 (comment)

seanpdoyle mentioned this pull request Jan 25, 2024

Morph with ignoreActiveValue: true hotwired/turbo#1141

Merged

seanpdoyle commented Jan 25, 2024

View reviewed changes

1cg merged commit d031215 into bigskysoftware:main Jan 29, 2024

seanpdoyle deleted the ignore-active-value-excludes-body-element branch January 30, 2024 01:37

seanpdoyle mentioned this pull request Apr 12, 2024

Fix failing test #48

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Exclude `document.body` when morphing with `ignoreActiveValue: true` #34

Exclude `document.body` when morphing with `ignoreActiveValue: true` #34

seanpdoyle commented Jan 25, 2024

seanpdoyle Jan 25, 2024

Exclude document.body when morphing with ignoreActiveValue: true #34

Exclude document.body when morphing with ignoreActiveValue: true #34

Conversation

seanpdoyle commented Jan 25, 2024

seanpdoyle Jan 25, 2024

Choose a reason for hiding this comment

Exclude `document.body` when morphing with `ignoreActiveValue: true` #34

Exclude `document.body` when morphing with `ignoreActiveValue: true` #34