fix(panel): append panel body as a child element

[francoischalifour]

Summary

There's an issue where Preact loses the bodyRef ref when the widget re-renders because it cleans the tree. This issue exists with both preact and preact-compat (version < 10.0.0) but not with react (tested by @samouss).

This problem makes the collapsible option impossible to implement in the panel. It also causes other issues:

• Go to this sandbox
• Decrease the max price
• Select a filter (e.g. "Machine Washable")

The input range width loses the reference of its container.

Result

This solution doesn't rely on refs but on plain DOM manipulation. It inserts the body when the Preact component is mounted.

Note that this solution inserts another div inside div.ais-Panel-body (this is a recurring issue encountered in the GeoSearch component for example without big consequences).

[francoischalifour]

I updated these stories because they conflicted with the playground.

[algobot]

Deploy preview for instantsearchjs ready!

Built with commit e6057c3

https://deploy-preview-3561--instantsearchjs.netlify.com

[samouss]

We could add a test about the actual issue, the fact that the widget was unmount/mount at each render.

[Haroenv]

As expected, this added an extra div between the body and the widget root. I think it's a reasonable tradeoff in this case, although I wonder if there might be another way

[francoischalifour]

@samouss Any clue what would be a good way to test this? It seems to be very specific to Preact, and especially this current version. I'm not sure it would make sense to test that since the test can break if we upgrade the Preact dependency someday.

(I added a test on the lifecycle but it's unrelated)

@Haroenv We could mount the widget in a DocumentFragment and insert this fragment into the panel body div. However, InstantSearch.js doesn't seem to be compatible with DocumentFragments as containers (it doesn't render anything).

[samouss]

@francoischalifour I don't think it's an issue, it might be an expected behaviour. Indeed it's very specific to Preact like the issue we have. IMO it worth cover it with a test to avoid any regression in the future. We can reproduce the exact same logic that we have inside the Panel and test that the component is not re-created.

[francoischalifour]

FYI we decided not to test #3561 (comment). This will be fixed by Preact X.

[samouss]

We can remove the indirection created by the renderer. We can avoid to return a new function from the renderer and provide the full list of argument each time call the function. We do this in widgets because we don't have the control on the render call (which can be avoided anyway). Here we do have the control (see below). We can do it in another PR.

const renderer = ({
  containerNode,
  bodyContainerNode,
  cssClasses,
  templateProps,
  options,
  hidden
}) => {
  render(
    <Panel
      cssClasses={cssClasses}
      hidden={hidden}
      templateProps={templateProps}
      data={options}
      bodyElement={bodyContainerNode}
    />,
    containerNode
  );
};